@RGBPlus

Owl Carousel jQuery по 3 блока в 2 ряда (bootstrap)?

Добрый день!

Будет вот такой слайдер:
5a12e9d569ee7513843895.jpeg

Три блока в два ряда, как вывести не знаю, выводятся все в одну линию

Нашел вот такое: jsfiddle.net/qork/zLue8chk но у меня так вывести не получится из CMS

-----------------
Решение:
kenwheeler.github.io/slick

Там есть параметр: rows
  • Вопрос задан
  • 4486 просмотров
Пригласить эксперта
Ответы на вопрос 4
Chefranov
@Chefranov
Новичок
Верстайте 6 блоков, а потом все 6 блоков оберните в один блок, этот блок и будет слайдом
Ответ написан
@tyzberd
idangero.us/swiper/demos
Multi Row Slides Layout
но там на flex
Ответ написан
it_proger29
@it_proger29
Битрикс
https://codepen.io/nrandall/pen/WXpaEz подойдет?
Смотрите комментарий под ответом.
Ответ написан
@alexshirnin
если еще кому актуально, решил подобным способом:
запускаем сначала скрипт, который оборачивает блоки по 2шт, дальше инициализируем карусель
стилизация и настройки карусели на ваш вкус)

у меня такая разметка:































скрипт:
function promoSlider() {
const $promoSliderPoints = $('.promo-slider__point');
const $promoSliderContainer = $promoSliderPoints.parent(); // Родительский контейнер блоков

let i = 0;
while (i < $promoSliderPoints.length) {
const $wrapper = $('');

for (let j = 0; j < 2 && i < $promoSliderPoints.length; j++) {
const $clonedPoint = $promoSliderPoints.eq(i).clone();
$wrapper.append($clonedPoint);
$promoSliderPoints.eq(i).remove(); // Удаление оригинального блока после клонирования
i++;
}

$promoSliderContainer.append($wrapper);
}

initPromoSlider()
}

function initPromoSlider() {
$(".promo-slider").owlCarousel({
items: 2,
loop: false,
autoplay: false,
margin: 20,
nav: true,
dots: false,
});
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы