swiper常见问题

swiper是一个比较不错的一个轮播插件，但是呢，有时候在使用的时候也会出现很多的问题，我将我遇到的一些问题解决办法写在下面。

第一个问题：swiper分页器不显示

一般swiper使用分页器都是这样的

var mySwiper = new Swiper('.swiper-container',{
pagination: {
    el: '.swiper-pagination',
  },
})

如果你的分页器在使用了 pagination 后还没有显示出来，那么你可以替换一下swiper的js和css试一下，我就是这么做的。

第二个问题：swiper不断的切换

一般swiper切换是这样的

var mySwiper = new Swiper('.swiper-container', {
  autoplay:true,//等同于以下设置
});

如果你写成了这样

var mySwiper = new Swiper('.swiper-container', {
  /*autoplay: {
    delay: 3000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },*/
});

有可能你的轮播就会不断切换，所以要写成上面那样，然后轮播时间这些可以这样写

var mySwiper = new Swiper('.swiper-container', {
　autoplay:true,
  autoplay: {
    delay: 1000,//1秒切换一次
  },
});

暂时就这些了，以后遇到其他问题我还会继续补充上来的。

 

一般我们使用swiper做轮播基本都是固定的参数，现在我把这些参数写下来

var mySwiper = new Swiper('.swiper-container', {
  autoplay:true,//是否自动切换
  autoplay: {
    delay: 1000,//1秒切换一次
    disableOnInteraction:false，//用户操作后是否继续切换，默认true:停止
    reverseDirection:false,//开启反向切换，默认false
  },
  pagination: {
    el: '.swiper-pagination',//开启分页器
    type: 'bullets',//分页器样式
    bulletElement : 'li',//指定分页器标签
    hideOnClick :true,//显示/隐藏分页器:默认显示false，true隐藏
    clickable :true,//点击切换分页器
  },
   navigation: {//前进后退按钮
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
});