H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】切换多个swiper之后滑动轮播图底下的分页器不动了?

https://jsfiddle.net/aLq1b11f/

使用swiper进行轮播效果,出现了一个奇怪的问题,不知是不是bug,
多次点击切换button之后 ,滑动轮播图,底下的分页小点点就不动了?
图片描述

回答:

之前没用过Swiper,专门去官网看了一下demo和API。

楼主的问题不是Swiper插件出现Bug,而是你在createSwiper()函数中,用一个局部变量”var swiper = Swiper()”去创建一个Swiper实例后,再次调用createSwiper()函数时,没有对之前创建的实例进行释放,从而出现问题。
刚才测试了一下,你的方法不清楚会不会造成内存泄漏,但是Pagination在”loop: true”时,会出现计算错误,导致你所谓的bug。

修改如下:

$(function() {
  $("button").click(function() {
    var index = $(this).index();
    var swiper;
    $("body").find('.wrap-container').eq(index).show().siblings('.wrap-container').hide();
    if(swiper !== undefined) {
        swiper.destroy();
    }
    swiper = createSwiper(1 + index);
  });
});

function createSwiper(index) {
  var swiper = new Swiper('.swiper' + index, {
    pagination: '.pagination' + index,
    paginationClickable: true,
    loop: true,
    paginationBulletRender: function(index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    }
  });
  return swiper;
}

======================
目测真的是Swiper插件本身存在的Bug,对同一个swiper重复进行初始化后,Pagination就无法使用了,楼主有空可以在官网那里反馈一下。
暂时想到一个解决方案是用两个全局变量来保存两个Swiper的初始化状态,然后根据对应的index和swiper状态来判断是否进行初始化,如果您有更好的解决方案,麻烦也告知一下,谢谢!

$(function(){
    var swiper1, swiper2;
    $("button").click(function(){
        var index = $(this).index();
         $("body").find('.wrap-container').eq(index).show().siblings('.wrap-container').hide();
         if(index === 0 && swiper1 === undefined) {
            swiper1 = createSwiper(1);
        } else if(index === 1 && swiper2 === undefined) {
            swiper2 = createSwiper(2);
        }
    });
});

function createSwiper(index){
    var swiper = new Swiper('.swiper'+index, {
        pagination: '.pagination'+index,
        paginationClickable: true,
        loop:true,
        paginationBulletRender: function (index, className) {
            return '<span class="' + className + '">'+(index+1)+'</span>';
        }
    });
    return swiper;
}

回答:


var swiper = new Swiper(‘.swiper-container’,{

......

});
.swiper-container : 这是class选择器
<div class=”swiper-container” >
这里的swiper-container,是原生样式,所以不能改,你可以把这里换成
id=”swiper-container-id”
<div class=”swiper-container” id=”swiper-container-id”>
var swiper = new Swiper(‘.swiper-container-id’,{

......(这就ok了)

});

回答:

暴力模式?

// 滚动图
var mySwiper = new Swiper('#swiper-container-id', {
    'pagination': '.swiper-pagination',
    'paginationClickable': true,
    'autoplay': 5000,
    'updateOnImagesReady': true,
    'autoplayDisableOnInteraction': false,
    onImagesReady: function (swiper) { // 图片加载完执行
    },
    onSlideChangeEnd: function (swiper) { // pagination BUG
        var activeIndex = swiper.activeIndex;
        $('.swiper-pagination')
            .find('span')
            .eq(activeIndex)
            .addClass('swiper-pagination-bullet-active')
            .siblings()
            .removeClass('swiper-pagination-bullet-active');
    }
});

回答:

swiper4 官方解决方案, swiper3未测试

 var swiper1 = new Swiper('.swiper1', {
       pagination: {
            el: ".swiper-pagination",
            renderBullet: function (index, className) {
                // 关键 保证下面span标签之间的内容不能同其他swiper的pagination里span的内容一样即可!!
                return "<span class=\"" + className + "\">" + 'swiper1' + "</span>"
            }
        } 
});

var swiper2 = new Swiper('.swiper2', {
       pagination: {
            el: ".swiper-pagination",
            renderBullet: function (index, className) {
                // 关键 保证下面span标签之间的内容不能同其他swiper的pagination里span的内容一样即可 !! 
                return "<span class=\"" + className + "\">" + 'swiper2' + "</span>"
            }
        } 
});

我这里是写入了一个字符串。 将分页器的样式中将文字隐藏即可

本文地址:H5W3 » 【Web前端问题】切换多个swiper之后滑动轮播图底下的分页器不动了?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址