swiper常见使用以及问题整理

swiper中文API：https://www.swiper.com.cn/api/index.html

1、实现下面的布局(主要看左右两边的)

上面的例子看出，中间部分居中在页面水平中央，两边显示一小部分,下面是关键代码：

const newsSwiper = new Swiper('#newsSwiper', {
    //  循环展示
    loop: true,
    //  一秒钟换一次
    number: 1000,
    //  自动播放
    autoplay: true,
    // TODO  简直开心啊，这个设置小数太酷了，这个功能实现主要是因为这里设置了小数
    slidesPerView: 1.4,
    //  两个图片之间的间距
    spaceBetween: 10,
    //  激活的图片居中显示
    centeredSlides: true
});

2、手动滑动后自动轮播失效

参考：https://blog.csdn.net/MPQ1314/article/details/86702181

swiper轮播图设置自动轮播之后如果手动滑动之后，就不会再自动轮播了

解决方法：

var swiper = new Swiper('#swiper1', {
      pagination: {
          el: '.swiper-pagination',
      },
      loop:true,
      autoplay: {
              // 加上这一行代码就可以了，具体原因请查看官方文档
          disableOnInteraction: false
      }
});

3、怎么实现内部滚动

查看实例

• v3：https://3.swiper.com.cn/demo/99-inner-scroll.html
• v5：https://www.swiper.com.cn/demo/91-vertical-nested.html

‍