0

I want to show owl-carousel image-slides in two or three horizontal row, based on setting. How it is possible?

Also i need that, in mobile view(small screen), the image-slide should be single and should be in single row.

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
ThermeshB
  • 61
  • 1
  • 11
  • What "setting"? [Owl Carousel is responsive](https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html). Have you implemented that? – isherwood Apr 30 '19 at 14:26
  • "setting" means dynamically set logic, if it is 1 row, 2 row or more. We have to pass this row-count in div element in data-rowcount attribute. please see below code. – ThermeshB May 03 '19 at 12:36

1 Answers1

1

I have found this answer on my own, this will helps someone who need this if it is in their project-requirement.

Note: in new owl-carousel js (version 2.3.4), just make minor property change on init-code of below jquery code.

i am putting the code here: below is the .Net MVC HTML CODE: Here you can see in div tag class name "clsBannerAds", we will write jquery for append the multiple row in owl-carouesel. Also see in div tag there are some data- attributes which helps to make owl-carousel slides to show dynamically, as like how many rows, or how many slides in one column (based on setting in 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::>> (we need below function to call on 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"
        });
    });
}
ThermeshB
  • 61
  • 1
  • 11