0

Gostaria que ficassem 3 slides, não 5, porém estou com muita dificuldade pra colocar. não consigo mexer no código fonte do framework pq está tudo deitado, dificultando.

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

});

Alguém saberia? não achei na api pra mudar.

1 Resposta 1

0

Você está usando a opção 'responsive', portanto quando a largura da página for de 0 a 600 pixels de largura, será exibido 1 slide, quando for de 600 a 1000 pixels, serão exibidos 3 slides e quando for igual ou superior a 1000 pixels, serão exibidos 5 slides.

Você tem duas opções para que sejam exibidos 3 slides, a primeira é:

Remover a propriedade 'responsive' e deixar para que sejam exibidos 3 slides em todos os tamanhos de telas. Com essa opção, seu código passaria a ser o seguinte:

$(document).ready(function() {

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

});

Ou, se preferir, você pode apenas alterar o número de slides a serem exibidos em telas de 1000 ou mais pixels de largura. Logo, seu código ficaria assim:

$(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
            }
        }
    })

});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .