轮播引用swiper插件，但是ajax请求却无法渲染有效果的轮播效果

最新推荐文章于 2022-10-13 10:56:16 发布

原创最新推荐文章于 2022-10-13 10:56:16 发布 · 439 阅读

1 ·

CC 4.0 BY-SA版权

js学习总结专栏收录该内容

22 篇文章

订阅专栏

在使用Swiper轮播插件时，由于Ajax请求的数据未能及时渲染，导致轮播效果无法正常显示。解决方法是将Swiper的初始化过程放在Ajax请求完成之后，确保数据加载和轮播渲染的顺序正确，从而实现有效的轮播效果。

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

$.ajax({
    url: ExistUrl + "/index.php/api/Api/getCasesList",
    type: "POST",
    data: {
        cid: 108,
        device: 0
    },
    success(data) {
        var dataList = data.data.data;
        console.log(dataList);
     
        var html = '';
        $.each(dataList,function(k,v){
            html += "<div class='swiper-slide course_servie'>" +
                "<div class='swiper-slide-img'>" +
                // "<img src='" + dataList[k].coverimg + "' alt=''>" +
                "<img src='../images/course1.png' alt=''></img>" +
                "</div>" +

                "<p class='text1'>营销管理so easy</p>" +
                "<p class='text2 clear'>" +
                "<span>授课导师：陈宇</span>" +
                "<span>人气：1263</span>" +
                "</p>" +
                "</div>";
        });
        $(".case-bottomswp").html(html);
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 30,
            // observer: true,
            // observerParents: true,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });


    }
});

解决办法：把swiper的注册放进ajax请求里面，就可以生效
错误原因：渲染顺序的问题