如何根据设置显示多个水平行中的猫头鹰轮播幻灯片？

Question

我想根据设置在两个或三个水平行中显示猫头鹰轮播图像幻灯片。怎么可能？

另外我需要的是，在移动视图（小屏幕）中，图像幻灯片应该是单个的，应该是单行。

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

Answer 1

我自己找到了这个答案，这将有助于需要这个的人，如果它符合他们的项目要求。

注意：在新的owl-carousel js（版本2.3.4）中，只需对jquery代码的init-code进行次要属性更改。

我在这里放置代码：下面是.Net MVC HTML代码：在这里你可以看到div标签类名“clsBannerAds”，我们将编写jquery来追加owl-carouesel中的多行。另外在div标签中可以看到一些数据属性有助于动态显示owl-carousel幻灯片，就像一行中有多少行或多少幻灯片一样（基于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"
        });
    });
}