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

Question

[Дмитрий Дербенев]

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


Имею следующую разметку 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, чтобы на мобильниках было следующее:

Answer 1

[Андрей]

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

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

Comments

[Дмитрий Дербенев]

Вариант с 2 слайдерами не подходит, потому что на мобильной версии сайта нужно отображать 1 item.
Обернуть 2 квадратных item-а тоже нельзя по той же причине(

[Андрей]

Дмитрий Дербенев, А на что Вам событие resize и методы add item/remove item?