Swiper触碰图片切换之后停止轮播,通过ajax添加图片,修改

相信前端的小伙伴们对轮播图都不陌生,对于做轮播图,swiper框架是一个不错的选择.废话不多说上代码

首先要引入需要的swiper CDN 使用

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>

问题1:触碰图片之后停止轮播

1.html页面

       <div class="swiper-container" id="swiperContainer1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

2.正常的调用:现在这种情况下,图片可以自动轮播,但是当用手触碰之后就会停止轮播,所以要再添加一个参数

                     // 轮播图
                      var mySwiper = new Swiper('#swiperContainer1', {
                            pagination: '.swiper-pagination',
                            loop: true,
                            autoplay: 3000,//可选选项，自动滑动                  
                        });

3.解决调用: autoplayDisableOnInteraction : false (注意此参数，默认为true)

                    // 轮播图
                    var mySwiper = new Swiper('#swiperContainer1', {
                         pagination: '.swiper-pagination',
                         loop: true,
                         autoplay: 3000,//可选选项，自动滑动  
                         autoplayDisableOnInteraction : false                        
                    });

现在无论怎么左右滑,轮播事件都不会停止了

问题2:Swiper 通过ajax加载图片轮播后,导航点失效

1.html页面

       <div class="swiper-container" id="swiperContainer1">
            <div class="swiper-wrapper">
                <!--<div class="swiper-slide">
                    <img src="http://img06.tooopen.com/images/20160818/
                        tooopen_sy_175866434296.jpg" alt="">                                             
                </div>  -->
            </div>
            <div class="swiper-pagination"></div>
        </div>

2.js解决(通过ajax)

描述:有时候轮播图的图片是通过发ajax向后台获取的,这时候你就会发现各种问题,比如轮播图不动,无法滑动,下面的指示小圆点变得混乱了等等。其实这些都是swiper的渲染问题,因为简单的swiper页面是静态的,资源数稳定的.当产生变化时,swiper需要重新渲染才行,不然就会出现问题,最简单的办法就是在ajax成功接收后台数据时我们开始渲染调用swiper函数

$.ajax({
    url: 'https//xxx.com/banner.php',//到时候改成你们自己的url
    data: {},
    type: 'post',
    success: function (res) {
        for (var i in res.packageInfo.pic_list){
            pic_list += '<div class="swiper-slide">' +
            '<img src="' + packageInfo.pic_list[i].pic_url + '" alt="">'+
            '</div>';
        }
        $('.swiper-container .swiper-wrapper').html(pic_list);

       // 轮播图
       var mySwiper = new Swiper('#swiperContainer1', {
       pagination: '.swiper-pagination',
       loop: true,
       autoplay: 3000,//可选选项，自动滑动  
       autoplayDisableOnInteraction : false ,                          
       });
 },
   error: function () {
        console.log('网络异常，请重试');
   }

问题3:当改变swiper的样式(例如隐藏/显示)或者修改swiper元素时,自动初始化swiper

1.html页面

       <div class="swiper-container" id="swiperContainer1">
            <div class="swiper-wrapper">
                <div class="swiper-slide1">
                    <img src="http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
       <button class="btn">隐藏</button>

2.js事件

//隐藏
$('.btn1').click(function(){
    $(".swiper-wrapper").hide(); 
});
//删除
$('.swiper-wrapper .swiper-slide1').click(function(){
    $(this).remove(); 
})

3.改变swiper后初始化调用

    var mySwiper = new Swiper('.swiper-container',{
        pagination : '.swiper-pagination',
        observer:true,//默认为false,当子元素发生变化的时候
        observeParents:true,//默认为false,当父元素发生变化的时候
    })

以上纯粹用来笔记,如有错误之处还望留言指点~
如需想要了解更多可登录Swiper中文文档地址:
https://www.swiper.com.cn/cdn/index.html