@vitaliyserebryanskiy

Как реализовать слайдер с разной длинной слайдов при скролле?

Здравствуйте, нужно реализовать слайдер с таким внешним видом.
5dfe7eaac5b79530307609.jpeg
У активного слайдера область становится больше справа, у остальных же видно только фото, как только смена слайдера происходит текст прячется и слайд уходит.
Пробовал реализовать через slick-slider, задав что у активного слайда видна левая колонка, а у остальных её нету, но slick инициалирует длину слайдов.
Как это можно поправить, или каким слайдером можно заменить, что бы не было такого?
5dfe7f5c427c9837109464.jpeg
.features {
  &__slider {
    width: 698px;
    & .slick-list {
      overflow: unset;
    }
  }
  &__item {
    padding: 0 5px;
    position: relative;
    z-index: 2;
    &.slick-active {
      & .features__item_info {
        display: block;
      }
      & .features__item_wrap {
        padding-left: 40px;
      }
    }
    &_wrap {
      display: flex;
      flex-wrap: wrap;
      padding: 36px 0 34px 0;
    }
    &_info {
      display: none;
      width: 318px;
      padding-top: 64px;
    }
    &_photo {
      width: 330px;
      height: 425px;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
}
  • Вопрос задан
  • 146 просмотров
Решения вопроса 1
AngryYumy
@AngryYumy
Заплати фрилансеру чеканой монетой
На кануне уже 2020 год забудьте вы уже про этот slick.
https://swiperjs.com/api/ - вод довольно шикарный слайдер. Покопайся в документации - и усе будет.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы