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

Question

[Роман]

Добрый день!

Будет вот такой слайдер:


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

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

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

Там есть параметр: rows

Comments

[Ярослав Иванов]

Слайдер просто отображает контент. Не более. Делайте верстку на 6 блоков.

[Роман]

Дописал вопрос

Answer 1

[Eugene Chefranov]

Верстайте 6 блоков, а потом все 6 блоков оберните в один блок, этот блок и будет слайдом

Comments

[Роман]

Да бы с радостью, только CMS так не сможет выдать, если бы на чистом HTML

[tyzberd]

почему не сможет, там не циклом выводится? Можете сделать костыль на js, который обернет по 6, а после подключайте слайдер

[Роман]

Дописал вопрос

Answer 2

[tyzberd]

idangero.us/swiper/demos
Multi Row Slides Layout
но там на flex

Comments

[Роман]

Дописал вопрос

Answer 3

[Владимир Куликов]

https://codepen.io/nrandall/pen/WXpaEz подойдет?
Смотрите комментарий под ответом.

Comments

[Владимир Куликов]

Создайте и подключите файл owl2row.js с содержимым:

//owl2row plugin
    ;(function ($, window, document, undefined) {
        Owl2row = function (scope) {
            this.owl = scope;
            this.owl.options = $.extend({}, Owl2row.Defaults, this.owl.options);
            //link callback events with owl carousel here
    
            this.handlers = {
                'initialize.owl.carousel': $.proxy(function (e) {
                    if (this.owl.settings.owl2row) {
                        this.build2row(this);
                    }
                }, this)
            };
    
            this.owl.$element.on(this.handlers);
        };
    
        Owl2row.Defaults = {
            owl2row: false,
            owl2rowTarget: 'item',
            owl2rowContainer: 'owl2row-item',
            owl2rowDirection: 'utd' // ltr
        };
    
        //mehtods:
        Owl2row.prototype.build2row = function(thisScope){
        
            var carousel = $(thisScope.owl.$element);
            var carouselItems = carousel.find('.' + thisScope.owl.options.owl2rowTarget);
    
            var aEvenElements = [];
            var aOddElements = [];
    
            $.each(carouselItems, function (index, item) {
                if ( index % 2 === 0 ) {
                    aEvenElements.push(item);
                } else {
                    aOddElements.push(item);
                }
            });
    
            carousel.empty();
    
            switch (thisScope.owl.options.owl2rowDirection) {
                case 'ltr':
                    thisScope.leftToright(thisScope, carousel, carouselItems);
                    break;
    
                default :
                    thisScope.upTodown(thisScope, aEvenElements, aOddElements, carousel);
            }
    
        };
    
        Owl2row.prototype.leftToright = function(thisScope, carousel, carouselItems){
    
            var o2wContainerClass = thisScope.owl.options.owl2rowContainer;
            var owlMargin = thisScope.owl.options.margin;
    
            var carouselItemsLength = carouselItems.length;
    
            var firsArr = [];
            var secondArr = [];
    
            //console.log(carouselItemsLength);
    
            if (carouselItemsLength %2 === 1) {
                carouselItemsLength = ((carouselItemsLength - 1)/2) + 1;
            } else {
                carouselItemsLength = carouselItemsLength/2;
            }
    
            //console.log(carouselItemsLength);
    
            $.each(carouselItems, function (index, item) {
    
    
                if (index < carouselItemsLength) {
                    firsArr.push(item);
                } else {
                    secondArr.push(item);
                }
            });
    
            $.each(firsArr, function (index, item) {
                var rowContainer = $('<div class="' + o2wContainerClass + '"/>');
    
                var firstRowElement = firsArr[index];
                    firstRowElement.style.marginBottom = owlMargin + 'px';
    
                rowContainer
                    .append(firstRowElement)
                    .append(secondArr[index]);
    
                carousel.append(rowContainer);
            });
    
        };
    
        Owl2row.prototype.upTodown = function(thisScope, aEvenElements, aOddElements, carousel){
    
            var o2wContainerClass = thisScope.owl.options.owl2rowContainer;
            var owlMargin = thisScope.owl.options.margin;
    
            $.each(aEvenElements, function (index, item) {
    
                var rowContainer = $('<div class="' + o2wContainerClass + '"/>');
                var evenElement = aEvenElements[index];
    
                evenElement.style.marginBottom = owlMargin + 'px';
    
                rowContainer
                    .append(evenElement)
                    .append(aOddElements[index]);
    
                carousel.append(rowContainer);
            });
        };
    
        /**
         * Destroys the plugin.
         */
        Owl2row.prototype.destroy = function() {
            var handler, property;
    
            for (handler in this.handlers) {
                this.owl.dom.$el.off(handler, this.handlers[handler]);
            }
            for (property in Object.getOwnPropertyNames(this)) {
                typeof this[property] !== 'function' && (this[property] = null);
            }
        };
    
        $.fn.owlCarousel.Constructor.Plugins['owl2row'] = Owl2row;
        })( window.Zepto || window.jQuery, window,  document );
        //end of owl2row plugin

Подключите его после подключения owl owl.carousel.js

//init carousel
    $(".name").owlCarousel({
        loop: true,
        autoplay: true,
        owl2row: true
    });

Answer 4

[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,
});
}