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

绝地灬酷狼 2021-11-09 13:58 296阅读 0赞

$.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请求里面，就可以生效  
错误原因：渲染顺序的问题

发表评论取消回复

表情：

评论列表（有 0 条评论，296人围观）

还没有评论，来说两句吧...

相关阅读

相关 nuxt3：swiper实现轮播效果

一、背景 nuxt3项目使用swiper实现轮播图效果。二、官网文档 2.1、Swiper CDN [Swiper CDN - Swiper中文网][Swiper C

柔光的暖阳◎/ 2024年03月27日 14:56/ 0 赞/ 112 阅读

相关轮播图效果

效果图： ![1264306-20190925165841953-217666741.gif][] 1.引入依赖 implementation 'com.yout

Dear 丶/ 2023年08月17日 17:09/ 0 赞/ 140 阅读

相关 swiper实现常规轮播效果

/html代码/ <div class="swiper-container"> <ul class="swiper-wrapper">

痛定思痛。/ 2023年07月12日 03:33/ 0 赞/ 10 阅读

相关 ios 扑克牌效果轮播_缩放效果的轮播图 iOS

![Image 1][] 111.gif 做个一个缩放的轮播图，基本实现功能。简单的记录下思路: 因为屏幕展示有三张图，所以传入的图片要先添加4张，左边两张(倒数第二

电玩女神/ 2023年01月09日 12:43/ 0 赞/ 215 阅读

相关使用swiper4轮播插件

[https://www.swiper.com.cn/download/index.html][https_www.swiper.com.cn_download_index.h

蔚落/ 2022年09月02日 05:15/ 0 赞/ 245 阅读

相关详解swiper轮播图的各种坑以及调用ajax实现轮播效果

Swiper常用于移动端网站的内容触摸滑动，对于前端开发人员来说使用swiper可以提高工作效率，不再需要写太多的代码，轻轻松松的实现想要的效果，工作中最常用的就是轮播图了，下

傷城~/ 2022年05月09日 03:26/ 0 赞/ 300 阅读

相关 js无缝轮播效果实现，自动轮播

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构

本是古典何须时尚/ 2022年04月06日 06:13/ 0 赞/ 379 阅读

相关 vue+swiper实现轮播效果一个页面放多个轮播

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

浅浅的花香味﹌/ 2022年01月28日 05:53/ 0 赞/ 1193 阅读

相关图片利用swiper插件实现轮播效果

一般当要使图片自适应屏幕大小变换时候，我们都要给每一个图片设置100%宽高。在图片的父级的div里写上固定的宽高，防止溢出。那么轮播是写在哪一部分呢？答案就是在父级div里

我就是我/ 2021年11月22日 07:26/ 0 赞/ 502 阅读

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

$.ajax({ url: ExistUrl + "/index.php/api/Api/getCasesList", type: "P

绝地灬酷狼/ 2021年11月09日 13:58/ 0 赞/ 297 阅读