Слайдер slick в 2 ряда с variableWidth, реально ли?

Добрый день! Необходимо сделать следующий слайдер:
5a5df9e46ad50768744676.png

Имею следующую разметку html:
<div class="js-news-slider">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    ...
</div>


Использую слайдер slick с параметрами rows: 2, slidesPerRow: 3 и variableWidth: true .
Проблема в том, что параметр slidesPerRow меняет ширину item, которая задана в стилях в пикселях на свою в процентах (33%, 50% и так далее. в зависимости от того, сколько слайдов в ряду будет). При таком раскладе параметр variableWidth не функционирует.

Можно ли реализовать такой слайдер с помощью slick, или искать другие решения? Посоветуйте слайдер, на котором можно это сделать.

upd.
1 новость должна быть в 1 div, чтобы на мобильниках было следующее:
5a5e09a108ad9783725170.png
  • Вопрос задан
  • 287 просмотров
Пригласить эксперта
Ответы на вопрос 1
@kvaak
Страдаю синдромом ученика
Я бы завел просто 2 слайдера, отключив возможность управления например для второго, и вызывал бы ему события в зависимости от произошедших событий первого. Должно взлететь, правда, за исключением жестов свайпа, их лучше вырубить, если использовать такой чудо-костыль

Либо еще 1 вариант, убрать variableWidth, а значение slidesPerRow выставить на 2. И оборачивать 2 квадратных блока, также как 1 прямоугольный, в 1 слайд
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы