Swiper 动态获取数据轮播

本文介绍了如何使用Swiper实现动态获取数据并展示的轮播图。首先,引入Swiper的JS和CSS文件,然后创建轮播图的HTML结构。接着,通过Ajax进行POST请求获取数据,将返回的内容动态插入到轮播图容器中。最后,在数据加载完成后,使用Swiper初始化轮播图设置,包括滑动速度、自动播放和导航按钮等选项。

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

1.导入Swper最新的js和css

2.创建div

<div class="swiper-container" style="height: 310px;margin-top: 25px; width:97%;">
    <div class="swiper-wrapper wrap" id="carousel">                </div>
    
   <!-- <div class="swiper-button-next" ></div>     这是轮播图的左右按钮
    <div class="swiper-button-prev"></div>-->

</div>

3.动态获取数据

var json =  "{categoryId:'fa3f6e14d25f48b9a712bebeb7e788e2',limit:'10'}";
$.ajax({
                url: "com.chinacoal.ccdev.first.NewsModel.showCarousel.biz.ext",
                data: json,
                type: 'POST',
                async:false,
                cache: false,
                contentType: 'text/json',
                success: function (text) {
                var newsList = nui.decode(text.newsList)  ;
                for(var i=0;i<newsList.length;i++){
                $("#carousel").append("<div class='swiper-slide'>内容自己添加</div>");
                }
               
         
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                    },

            }); 

4.在获取数据后重新初始化js

var mySwiper = new Swiper ('.swiper-container', {
                    slidesPerView:4,
                    autoplay: { 
delay: 2000, 
disableOnInteraction: false, 
}, 
                    speed:1000,
loop: true,
observer:true,
observeParents:true,
navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值