Swiper: обновлять ширину слайдов при изменении ширины слайдера

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