How to start Owl Carousel after 2 seconds?

Asked

Viewed 972 times

1

I have an Owl Carousel slide, when the site is loading the images load in half and the autoplay, already starts and begins to pass without the images have fully uploaded, I would like to know how to start autoplay after 2 seconds the page is fully loaded.

$('.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>

owl-carousel

2 answers

1


Change the autoplay to 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
        }
    }
});

And then add call on onload so:

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

The [2000] refers to the 2 seconds you requested.

  • Unfortunately it didn’t work, test with . load before and after my code, both didn’t work. Only loads after it doesn’t play.

  • @Developerwebsistem... added the var owl? Any error appears in the console?

  • 1

    I’m sorry friend, I had not inserted var Owl. @Guilherme Nascimento thank you very much solved my problem!

  • I went to check here, he gives the play only in an image. In other words, he passes only the first and the others does not pass. It will be what can be?

0

var $owl = $('.slider).owlCarousel(options);
var autoplayDelay = 2000;

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

Browser other questions tagged owl-carousel

You are not signed in. Login or sign up in order to post.