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

Question

Нужен адаптивный вертикальный слайдер, который бы выводил слайды в несколько колонок. Перепробовал owl, bxslider, swiper. Не могу нагуглить никакого решения. На float, grid, flex без разницы.

К примеру вот тут курс криптовалют в строку и он сменяется вертикально https://www.binance.com/en

Первый слайд:

Второй слайд:

А на планшетах и мобильных, чтобы кол-во колонок уменьшалось.

Answer 1

Можно использовать slick с режимом vertical

Уменьшать кол-во можно тем, что через @media скрывать часто блоков .oneslider

Пример:

$(document).ready(function(){
  $('.your-class').slick({
    infinite: true,
    vertical: true,
    dots: true,
    autoplay: true,
    autoplaySpeed: 2000,
  });
});

.vertical-flex {
  display: flex;
}

.oneslider {
  width: 25%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.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.min.css">

<div class="vertical-flex">
  <div class="oneslider">
    <div class="your-class">
      <div>your content</div>
      <div>your content</div>
      <div>your content</div>
    </div>
  </div>
  <div class="oneslider">
    <div class="your-class">
      <div>your content</div>
      <div>your content</div>
      <div>your content</div>
    </div>
  </div>
  <div class="oneslider">
    <div class="your-class">
      <div>your content</div>
      <div>your content</div>
      <div>your content</div>
    </div>
  </div>
  <div class="oneslider">
    <div class="your-class">
      <div>your content</div>
      <div>your content</div>
      <div>your content</div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

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

Ответы (1 шт):