0

я верстаю лендинг, и мне попался вот такой слайдер, я хочу использовать slick slider, но не могу понять как его настроить, чтобы получилось хотя бы нечто подобное. Как сделать вертикальный слайдер я понимаю, а как сделать, чтобы под текущим слайдом был следующий? Помогите разобраться, пожалуйста. У меня пока обычный вертикальный слайдер, где слайды идут по очереди один за другим.введите сюда описание изображения

2
  • Я правильно понял, Вы хотите чтобы у вашего вертикального слайдера отображалось два слайда на экране: текущий и следующий?
    – SLideR11
    25 ноя 2021 в 0:09
  • да, все правильно
    – Loks
    25 ноя 2021 в 12:22

1 ответ 1

0

Slick-слайдер не лучшее решение для вертикального слайдера, нужно будет подбирать высоту для контента в слайдере иначе он будет глючить: снизу слайд может обрезаться, сверху вылезти низ скрытого.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />

<div class="slick-vertical">
  <div><img src="https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg"></div>
  <div><img src="https://images.pexels.com/photos/15286/pexels-photo.jpg"></div>
  <div><img src="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg"></div>
  <div><img src="https://images.pexels.com/photos/624015/pexels-photo-624015.jpeg"></div>
  <div><img src="https://images.pexels.com/photos/3244513/pexels-photo-3244513.jpeg"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<script>
  $(function() {
    $('.slick-vertical').slick({
      vertical: true, // делает слайдер вертикальным
      verticalSwiping: true,
      slidesToShow: 2, // показывает по два слайда
    });
  });
</script>

<style>
  .slick-prev,
  .slick-next {
    -webkit-transform: translate(-50%, 0) rotate(90deg);
    -ms-transform: translate(-50%, 0) rotate(90deg);
    transform: translate(-50%, 0) rotate(90deg);
    left: 50%;
  }
  
  .slick-prev {
    top: 0;
    z-index: 1;
  }
  
  .slick-next {
    top: auto;
    bottom: 0;
    z-index: 1;
  }
  
  img {
    width: 100%;
    height: 300px;
  }
</style>

1
  • Через флексы сверстать и не будет ничего нигде вылезать..и контент будет ровненьким. 26 ноя 2021 в 5:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.