Swiper：当 slider 宽度改变时更新幻灯片宽度

Question

I have a slider that change it's width when user click on next button for the first time:

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

And JS

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

But how can I change the slide width when this happens? How can I avoid show part of the next slide?

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

Answer 1

Found a solution using transform:translateX(100px) to hide part of the slider. This is not the best solution, so I'm open to another suggestions.

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

Answer 2

If you want your slide to work properly, just change the width of the.wide, like this:

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