1

Eu tenho um slide Owl Carousel, quando o site está carregando as imagens carregam pela metade e o autoplay, já inicia e começa a passar sem as imagens terem carregado totalmente, gostaria de saber como faço para iniciar o autoPlay depois de 2 segundos que a pagina for totalmente carregada.

$('.slider').owlCarousel({
                        items: 1,
                        loop: true,
                        autoplay: true,
                        autoplayTimeout: 6000,
                        autoplayHoverPause: false,
                        margin: 0,
                        stagePadding: 0,
                        smartSpeed: 2000,
                        responsiveClass: true,
                        responsive: {
                            0: {
                                margin: 0,
                                stagePadding: 0
                            },
                            600: {
                                margin: 0,
                                stagePadding: 0
                            },
                            1000: {
                                margin: 0,
                                stagePadding: 0
                            }
                        }
                    });
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>



<div class=" slider owl-theme owl-carousel">
        <img alt="img slider" src="http://www.newsrondonia.com.br/imagensNoticias/image/IMAGEM].jpg" class="item">
        <img alt="img slider" src="https://img1.ibxk.com.br/2017/07/13/13160112901226.jpg?w=700" class="item">
        <img alt="img slider" src="https://blog.emania.com.br/content/uploads/2016/02/direitos-autorais-e-de-imagem-750x375.jpg" class="item">
    </div>

2 Respostas 2

1

Mude o autoplay para false:

var owl = $('.slider').owlCarousel({
    items: 1,
    loop: true,
    autoplay: false, //AQUI
    autoplayTimeout: 6000,
    autoplayHoverPause: false,
    margin: 0,
    stagePadding: 0,
    smartSpeed: 2000,
    responsiveClass: true,
    responsive: {
        0: {
            margin: 0,
            stagePadding: 0
        },
        600: {
            margin: 0,
            stagePadding: 0
        },
        1000: {
            margin: 0,
            stagePadding: 0
        }
    }
});

E então adicione chame em onload assim:

$(window).load(function () {
     owl.trigger('play.owl.autoplay', [2000]);
});

O [2000] se refere aos 2 segundos que você pediu.

4
  • Infelizmente não funcionou, teste com o .load antes e depois do meu código, ambas não funcionaram. Somente carrega depois ele não dá o play.
    – Sr. Bigode
    Commented 18/09/2017 às 12:12
  • @DeveloperWebSistem... adicionou o var owl? Aparece algum erro no console?
    – Syzoth
    Commented 18/09/2017 às 12:24
  • 1
    Me desculpe amigo, não havia inserido o var owl. @Guilherme Nascimento muito obrigado resolveu meu problema!
    – Sr. Bigode
    Commented 18/09/2017 às 13:45
  • Fui conferir aqui, ele da o play somente em uma imagem. Ou seja passa somente a primeira e as outras não passa. Será o que pode ser?
    – Sr. Bigode
    Commented 22/09/2017 às 13:14
0
var $owl = $('.slider).owlCarousel(options);
var autoplayDelay = 2000;

if (autoplayDelay) {
    $owl.trigger('stop.owl.autoplay');
    setTimeout(function() {
        $owl.trigger('play.owl.autoplay');
    }, autoplayDelay);
}

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 .