swiper轮播图自定义slide宽度太长显示不完全，太短显示空白问题

写了那么多次轮播图，每次出错都不长记性，既然如此好记性不如烂笔头，把错误以及错误出现的原因和解决方法梳理记下来，加深一下记忆。

问题表现

从swiper官网上复制黏贴下来了一个free模式的轮播图
js代码如下

 var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      freeMode: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

我想要自定义slide的宽度，但是直接写在style标签内无效，查看审查元素似乎是swiper插件自动给我设置的，心里隐隐约约觉得哪里不太对劲，以前用好像没有给我设置过…但是不管了，一个important关键字强制搞定

.swiper-slide {
  width: 2.78rem !important;
}

再看页面slide的宽度是对了，但是往右滑到头发现有一部分怎么都滑不出来…再把宽度设小一点，又发现滑到右边出现了一块空白…

问题原因

后来和之前的代码对比才发现，在初始化swiper的时候多了一个slidesPerView属性

这个属性用于设置slides容器同时能够显示的slide的数量，如果将其属性值设为3，在100%宽度的情况下，插件会自动设置slide的宽度为30%，而容器的宽度也会因此计算好定死，强制改变slide的宽度就会出现显示不出或留白的现象

解决方法

如果需要自定义每个slide的宽度，可以将slidesPerView的属性值设为 ‘auto’，再配合css样式即可