Change number of slides in jQuery Carousel owl 2

Question

Change number of slides in jQuery Carousel owl 2

Navigation

#1 by (0 votes)

0

I wish there were 3 slides, not 5, but I'm having a hard time putting it. I can not move the source code of the framework because everything is lying down, making it difficult.

<div class="owl-carousel owl-theme">


                <div class="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">1</img></div><divclass="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">2</img></div><divclass="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">3</img></div><divclass="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">4</img></div><divclass="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">5</img></div><divclass="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">6</img></div><divclass="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">7</img></div><divclass="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">8</img></div><divclass="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">9</img></div><divclass="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">10 </img> </div>


            </div>



$(document).ready(function(){

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:150,
    items: 0,
    autoplay: false ,
    stagePadding: 0,
    center: true,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

});

Would anyone know? I did not find the api to change.

jquery owl-carousel

asked by anonymous 19.07.2017 / 01:28

1 answer

MySQL - Multi SELECTs in a query Customize PDF file name made in jaspersoft, java and spring

score 0 · Answer 1

You are using the ' responsive ' option, so when the width of the page is 0 to 600 wide pixels, 1 slide when 600 to 1000 pixels , 3 slides will appear, and 1,000 pixels will be displayed 5 slides .

You have two options for displaying 3 slides, the first one is:

Remove the 'responsive' property and let 3 slides appear on all screen sizes. With this option, your code would be as follows:

$(document).ready(function() {

    $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 150,
        items: 0,
        autoplay: false,
        stagePadding: 0,
        center: true,
        nav: true,
        items: 3
    })

});

Or, if you prefer, you can only change the number of slides to display on screens 1000 or more pixels wide. So your code looks like this:

$(document).ready(function() {

    $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 150,
        items: 0,
        autoplay: false,
        stagePadding: 0,
        center: true,
        nav: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1000: {
                items: 3
            }
        }
    })

});