Как показать слайды совы в карусели в несколько горизонтальных рядов в зависимости от настроек? - PullRequest
Новая
       55

Как показать слайды совы в карусели в несколько горизонтальных рядов в зависимости от настроек?

0 голосов
/ 30 апреля 2019

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

Также мне нужно, чтобы в мобильном представлении (на маленьком экране) слайд с изображением должен был быть одиночным и находиться в одной строке. 

Something like this (guess below numbers are images):

Slides(single row): 1  2  3  4  5  6  7  8  9

I need:(if Two row)
1  3  5  7  9
2  4  6  8

I need:(if Three row)
1  4  7
2  5  8
3  6  9

1 Ответ

0 голосов
/ 30 апреля 2019

Я нашел этот ответ самостоятельно, это поможет тем, кому это нужно, если оно соответствует требованиям проекта.

Примечание: в новой js owl-carousel (версия 2.3.4) просто внесите незначительное изменение свойства в коде инициализации приведенного ниже кода jquery.

Я помещаю код здесь: ниже HTML-код .Net MVC: Здесь вы можете увидеть в теге div имя класса "clsBannerAds", мы напишем jquery для добавления нескольких строк в owl-carouesel. Также обратите внимание, что в теге div есть некоторые атрибуты данных, которые помогают динамически отображать слайды с совой-каруселью, например количество строк или количество слайдов в одном столбце (в зависимости от значения в db).

HTML :: >> 

<div class="clsBannerAds" data-columncount="@(Model.AdvertGroup.BlockColumnSize ?? 1)" data-autoplayinterval="@(Model.AdvertGroup.CarouselRefreshRate)" data-rowcount="@(Model.AdvertGroup.BlockRowSize ?? 1)" data-displaymode="@Model.AdvertGroup.DisplayMode.ToString()">
@foreach (var item in Model.ListAdvertIndividual)
{
    int itemBannerHeight = Model.ListAdvertIndividual.Count() > 1 && string.IsNullOrWhiteSpace(item.LabelTitle) ? Model.AdvertGroup.GroupImgWithLableHeight : Model.AdvertGroup.GroupBannerHeight;
    if (item.AdvertIndividualId > 0 && !string.IsNullOrWhiteSpace(item.SeoFilename)) //--#0012794
    {
        <div class="item" style="margin-left:7px;margin-right:7px;margin-top:5px;margin-bottom:15px;">

            <div class="inner-item" style="height:@(Model.AdvertGroup.GroupImgWithLableHeight)px;width:@(Model.AdvertGroup.GroupBannerWidth);max-width:100%;margin-top:20px;">
                <img class="d-block w-100" src="@(item.SeoFilename)" alt="First slide" style="width:@(Model.AdvertGroup.GroupBannerWidth);height:@(itemBannerHeight)px;max-width:100%;">
            </div>

        </div>
    }
}

JQUERY :: >> (нам нужна функция ниже для вызова document.ready) 

function bannerAdWidgetSetCarousal() {
    $('.clsBannerAds').each(function (index, element) {
        var columnCount = $(this).attr('data-columncount') || 1;
        var columnCntDesktopSmall = columnCount > 2 ? columnCount - 1 : columnCount;
        var columnCntTablet = columnCntDesktopSmall > 2 ? columnCntDesktopSmall - 1 : 1;
        var playInterval = $(this).attr('data-autoplayinterval') || false;
        var rowCount = $(this).attr('data-rowcount');
        var displayMode = $(this).attr('data-displaymode');
        var isDynamicDisplayMode = displayMode && displayMode == "Dynamic" ? true : false;
        var makeAnimate = isDynamicDisplayMode;
        var showNavigationArrow = !isDynamicDisplayMode ? true : false;
        var arrNavText = !isDynamicDisplayMode ? ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"] : ["", ""];

        var slideItems = $(element).find('.item');

        //THIS is code for make carosal slide in horizontal row, based on row count [ex. slides in 1 row, 2 row, 3 row]
        if (rowCount && rowCount > 1 && slideItems.length > 1) {
            var loopCount = Math.ceil(slideItems.length / rowCount);
            for (var i = 0; i < loopCount; i++) {
                var $el = $(element).find('.item:nth-of-type(' + (i + 1) + ')');

                if ($el.next().length == 0) break;

                $el.next().find('.inner-item').appendTo($el);
                $el.next().remove();
            }
        }


        //Init owlCarousel
        $(element).owlCarousel({
            items: columnCount,
            lazyLoad: true,
            loop: true,
            autoPlay: playInterval,
            pagination: false,

            itemsDesktop: [1199, columnCount],
            itemsDesktopSmall: [979, columnCntDesktopSmall],
            itemsTablet: [768, columnCntTablet],
            itemsMobile: [479, 1],
            navigation: showNavigationArrow,

            navigationText: arrNavText,
            singleItem: makeAnimate,
            transitionStyle: "goDown"
        });
    });
}
...