Change number of slides in jQuery Carousel Owl 2

Question

I’d like you to have three slides, not five, but I’m having a really hard time putting them in. I can’t touch the source code of the framework.

<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>
                <div class="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg"> 2</img> </div>
                <div class="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">3 </img> </div>
                <div class="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">4 </img> </div>
                <div class="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">5 </img> </div>
                <div class="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">6 </img> </div>
                <div class="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">7 </img> </div>
                <div class="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">8 </img> </div>
                <div class="item-slide"> <img src="https://static.pexels.com/photos/110854/pexels-photo-110854.jpeg">9 </img> </div>
                <div class="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 didn’t find the api to change.

Answer 1

You are using the option 'Responsive', so when the page width is 0 to 600 width pixels, will be displayed 1 slide, when it’s from 600 to 1000 pixels, will be displayed 3 slides and when it is 1000 pixels or more, will be displayed 5 slides.

You have two options to display 3 slides, the first is:

Remove the 'Responsive' property and leave it so that 3 slides are displayed in all screen sizes. With this option, your code would become the following:

$(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 just change the number of slides to be displayed on screens 1000 or more pixels wide. Soon your code would look 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
            }
        }
    })

});