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代码进行较小的属性更改即可。

我将代码放在这里：下面是.Net MVC HTML代码：在这里，您可以在div标签类名称“ clsBannerAds”中看到，我们将编写jQuery以在owl-carouesel中追加多行。还可以在div标签中看到一些数据属性，这些数据属性有助于使猫头鹰轮播幻灯片能够动态显示，例如在一列中有多少行或多少幻灯片（基于db中的设置）。

HTML :: >>

node ./node_modules/protractor/bin/webdriver-manager update --versions.chrome 2.46

JQUERY :: >>（我们需要下面的函数来调用document.ready）

<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>
    }
}

如何根据设置在多个水平行中显示猫头鹰旋转木马幻灯片？

1 个答案: