swiper首尾两项不居中其余项居中

swiper的使用中有一种场景是首尾两项靠左或者靠右显示，其余项居中显示，如图：



如果所有项都居中并且露出相邻项的一部分，可直接如下设置：

const settings = {
    
    
  // 两遍显示相邻两张
  slidesPerView: 'auto',

  // 相邻两张间距
  spaceBetween: 12,

  // swiper动态加载
  observer:true, 
  observeParents:true,

  // 当前页居中显示
  centeredSlides: true,
}

首尾两张贴边，可以加一个参数：

const settings = {
    
    
  // 两遍显示相邻两张
  slidesPerView: 'auto',

  spaceBetween: 12,

  // swiper动态加载
  observer:true, 
  observeParents:true,

  // 当前页居中显示
  centeredSlides: true,

  // 第一张和最后一张贴合边缘 
  centeredSlidesBounds: true, 
}

然后在组件中new Swiper:

  useEffect(() => {
    
    
      let mySwiper = new Swiper('.swiper-container', settings);
      mySwiper.on('slideChange',hanldeSlide)
      return ()=>{
    
    
        mySwiper.destroy();
      }
  }, []);

需要设置.swiper-wrapper宽为100%，和滑动块的宽度.swiper-slide
设置完后效果是这样的：

需要给首尾两张分别添加左边距和右边距：

      .first-last-slide:first-of-type{
    
    
        margin-left: 38px;
      }
      .first-last-slide:last-of-type{
    
    
        margin-right: 38px;
      }
      .swiper-slide{
    
    
        width: 610px;
      } 

有一个需要注意的地方是，如果先new Swiper之后组件才获取到swiper里的数据，比如依赖接口或者props等，必须将下面两个参数设为true，否则会出现查看元素时所有滑动项都存在，但是页面上实际可滑动的只有第一张的情况：

  observer:true, 
  observeParents:true,