CODEWITHSUNDEEP
javascripthtmlcssowl-carousel
Bil
Bil

Reputation: 23

How to display a Items silde in two rows?

I have 16 items posted by 4 in a line with slide

<div class="owl-wrapper-outer">
<div class="owl-item"></div>
<div class="owl-item"></div>
<div class="owl-item"></div>
<div class="owl-item"></div>
<div class="owl-item"></div>
<div class="owl-item"></div>
...
</div>

I want to show them in two rows of 4 and the problem is that the slide changes by 4 at a time

Upvotes: 2

Views: 3304

Answers (1)

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$('.owl-carousel').owlCarousel({
    items:4,
    lazyLoad:true,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:3000,
    autoplayHoverPause:true,
});
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=1" data-src-retina="http://placehold.it/350x250&text=1-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="http://placehold.it/350x250&text=2-retina" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=3" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=8" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=9" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=10" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=11" alt="">
</div>
<br>
<div class="owl-carousel owl-theme" >
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=1" data-src-retina="http://placehold.it/350x250&text=1-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=3" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=8" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=9" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=10" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=11" alt="">
</div>

Upvotes: 1

Related Questions