swiper轮播图

最新推荐文章于 2025-06-17 22:41:20 发布

静夜思贤

最新推荐文章于 2025-06-17 22:41:20 发布

阅读量268

点赞数

CC 4.0 BY-SA版权

分类专栏： swiper 轮播图手机端文章标签： swiper 轮播图

本文链接：https://blog.youkuaiyun.com/weixin_43974876/article/details/99436585

手机端同时被 3 个专栏收录

5 篇文章

订阅专栏

swiper

1 篇文章

订阅专栏

轮播图

1 篇文章

订阅专栏

本文详细介绍如何使用Swiper库创建动态轮播图效果。通过HTML结构定义轮播容器，利用jQuery AJAX请求获取图片资源，结合Swiper配置参数实现图片自动播放及导航控制。适合前端开发者快速掌握Swiper的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查看swiper官方文档 https://www.swiper.com.cn/ 相关参数
左右滑动轮播图
html

<div class="main">
    <div class="swiper-container">
        <div class="swiper-wrapper">
<!--            <div class="swiper-slide">-->
<!--                <img src="../images/banner.png" class="imgs">-->
<!--            </div>-->
<!--            <div class="swiper-slide">-->
<!--                <img src="../images/banner.png" class="imgs">-->
<!--            </div>-->
<!--            <div class="swiper-slide">-->
<!--                <img src="../images/banner.png" class="imgs">-->
<!--            </div>-->
        </div>
    </div>
</div>

$.ajax({
        url: //请求地址,
        type://请求方式,
        success:function (res) {
            console.log(res)
            if (res.code == 0){
                $(".swiper-wrapper").empty();
                for (var i=0;i<res.data.length;i++){

                    $(".swiper-wrapper").append("<div class='swiper-slide'>" +
                        "                <img src='"+res.data[i].imgUrl+"' class='imgs' id='"+res.data[i].id+"' url='"+res.data[i].url+"'>" +
                        "            </div>")
                }
            }
        }
    })
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });