Question

我有一个滑块，可在用户首次单击下一步按钮时更改其宽度：

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

Answer 1

找到了使用transform:translateX(100px)隐藏部分滑块的解决方案。这不是最好的解决方案，因此我可以提出其他建议。

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

Answer 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;
  }
}

https://codepen.io/maxym11/pen/dyyJGLy

滑动：更改滑条宽度时更新滑条宽度

2 个答案: