0

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

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

Первый слайд: введите сюда описание изображения

Второй слайд: введите сюда описание изображения

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

3
  • jsfiddle.net/2g63xcbm вот к примеру, вертикальный слайдер 2 слайда друг под другом. Как сделать чтобы эти 2 слайда были в ряд? Commented 14 дек. 2021 в 10:15
  • Так в чем проблема со свайпером (с owl понятно, он три года как закрыт и переехал на tiny-slider) покажите код, что у вас получилось. Создайте минимальный воспроизводимый пример и все получится.
    – Greg--
    Commented 14 дек. 2021 в 11:46
  • В принципе не понятно зачем для смены двух слайдов какая-то библиотека или плагин
    – Greg--
    Commented 14 дек. 2021 в 11:48

1 ответ 1

0

Можно использовать 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>

Ваш ответ

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

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