swiper轮播图

查看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>

js

$.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',
        },
    });

来源：https://blog.csdn.net/weixin_43974876/article/details/99436585