Swiper：当滑块宽度改变时更新幻灯片宽度答案

【问题标题】：Swiper: update slides width when slider width changeSwiper：当滑块宽度改变时更新幻灯片宽度
【发布时间】：2020-05-09 19:38:15
【问题描述】：

当用户第一次点击下一个按钮时，我有一个滑块可以改变它的宽度：

CSS

#project-slider {
  height: 100vh;
  width: calc(100vw - 100px);
  position: absolute;
  right: 0;
  top: 0;
  transition: width 0.5s;

  &.wide {
    width: 100vw;
  }

  .swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
  }
}

还有 JS

slider.on('slideChange', function(){
  if(slider.activeIndex == 0){
    $(slider.$el).removeClass('wide');
  }else{
    $(slider.$el).addClass('wide');
  }
});

但是发生这种情况时如何更改幻灯片宽度？如何避免显示下一张幻灯片的一部分？

https://codepen.io/marcelo2605/pen/KKKZVvq?editors=0010

【问题讨论】：

标签： javascript css swiper

【解决方案1】：

找到使用transform:translateX(100px) 隐藏部分滑块的解决方案。这不是最好的解决方案，所以我愿意接受其他建议。

https://codepen.io/marcelo2605/pen/KKKZVvq?editors=0110

【讨论】：

【解决方案2】：

如果您希望幻灯片正常工作，只需更改 .wide 的宽度，如下所示：

  #project-slider {
  height: 100vh;
  width: calc(100vw - 100px);
  position: absolute;
  right: 0;
  top: 0;
  transition: width 0.5s;

  &.wide {
    width: calc(100vw - 100px); //the change
  }

  .swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
  }
}

【讨论】：

我的错，我希望我现在修复它
对不起，但这不是我需要的。第一张幻灯片必须填充 100vw - 100px。其他的必须装满100vw。我找到了解决方案，并将在此处发布。