Swiper插件在移动端使用时踩过的坑

最近做的一个需求需要用到swiper插件，在使用的过程中遇到了不少问题，在此总结一下。

本人使用的是目前swiper官网最新的swiper4，按照该网址：https://www.swiper.com.cn/usage/index.html

步骤操作完成后，发现效果如下。（为了更直观的看到swiper所在位置，改变了.swiper-container的背景颜色和大小，白色部分为我所定义的swiper-container）

swiper可以滑动，但是是上下滑动，没有达到预期效果，而且滚动条和切换按钮，页码均未展示出来。因为我们所用的前端项目是html文件和js分开写的，我在html文件中引入了swiper，js文件中并没有生效，所以我又重新在js文件中引入了swiper，问题解决。引入文件代码如下：

 require("../../css/swiper.min.css");
 require("../../js/swiper.min.js");

这时的效果为

并没有达到预期，因为我要做的是一个左右切换的swiper，在查阅了官方api后，将js改为如下代码

direction: 'horizontal'; horizontal为横向滑动切换，vertical为纵向滑动切换。这时已基本满足我要达到的效果了，修改后效果如下图

在这里贴出js代码

var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
        
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        
        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      })       

    本以为到这就可以安心的开发了，可是没过多久又出现了问题。

因为我要实现的是这样的一个需求，在点击图片弹出swiper时，页码出现了错乱问题，swiper页码变成了负值。

在定义的swiper内加上这两行代码后问题解决

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

顺便提一下实现以上动图效果需要用到的一个方法，让swiper滑动到指定位置：mySwiper.slideTo(index, 1000, false);