Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Owl Carousel в 2 ряда (https://javascript.ru/forum/dom-window/61126-owl-carousel-v-2-ryada.html)

SnezhanaLast 05.02.2016 14:49

Owl Carousel в 2 ряда
 
Здравствуйте!

Прошу помочь с каруселью товаров, чтобы это выглядело вот так:
http://jsfiddle.net/Owl/TWtwt/

Вот JS слайдера:
function initSlider() {
        var win_width = $(window).width();
        var column;
        if ($('#main').hasClass('column1'))
            column = 'column1';
        else if ($('#main').hasClass('column2'))
            column = 'column2';
        else
            column = 'column3';

        $('.product-slider').each(function() {
            var temp = column;
            if (!$(this).parents('#main').length)
                temp = 'column1';

            var $wrap = $(this);
            var itemsCustom;
            if (temp == 'column1')
                itemsCustom = [[0, 1], [750, 3], [992, 4]];
            else if (temp == 'column2')
                itemsCustom = [[0, 1], [750, 2], [992, 3]];
            else
                itemsCustom = [[0, 1], [750, 1], [992, 2]];

            if ($wrap.hasClass('sidebar') || $(this).hasClass('single')) {
                $wrap.find('.product-carousel').owlCarousel({
                    autoPlay : false,
                    singleItem: true,
                    navigation: true,
                    navigationText: ["", ""],
                    pagination: false
                });
            } else {
                $wrap.find('.product-carousel').owlCarousel({
                    autoPlay : false,
                    itemsCustom: itemsCustom,
                    navigation: true,
                    navigationText: ["", ""],
                    pagination: false
                });
                $wrap.find('h1, h2').each(function() {
                    var $this = $(this);
                    if ($this.find('.inline-title').length) return;
                    var text = $this.html();
                    $this.html('<span class="inline-title">' + text + '</span><span class="line"></span>');
                    $this.find('.line').hide();
                });
            }
        });


Помогите пожалуйста, перелазила весь Google, на англоязычных ресурсах люди сами решают проблему. Сайт на WordPress.

SnezhanaLast 07.02.2016 20:45

Или это не тот файл? Нашла в интернете вот этот код:
$(function () {
        var owl = $('#owl2row-plugin');
        owl.owlCarousel({
            loop: true,
            margin: 20,
            nav: false,
            owl2row: 'true', // enable plugin
            owl2rowTarget: 'item_',    // class for items in carousel div
            owl2rowContainer: 'owl2row-item', // class for items container
            owl2rowDirection: 'ltr', // ltr : directions
            responsive: {
                0: {
                    items: 2
                },
                480: {
                    items: 2
                },
                660: {
                    items: 3
                },
                960: {
                    items: 4
                }
            }
        });     
         $('.item_ a').on('click', function(e){
            e.preventDefault();
            $('.gallery-item').magnificPopup({                  
                  tPrev: 'Previous (Left arrow key)',
                  tNext: 'Next (Right arrow key)',
                  type:'inline',
                  showCloseBtn: true,
                  gallery:{
                    enabled:true
                  }
                });
        });
});


Часовой пояс GMT +3, время: 10:26.