CODEWITHSUNDEEP
owl-carousel-2
Natalia
Natalia

Reputation: 1027

Owl carousel autoplayTimeout does not work

I have the following settings in my owl carousel

$(".slider").owlCarousel({
        items: 1,
        loop: true,
        nav: true,
        margin: 0,
        dots: true,
        // animateIn: 'fadeIn',
        // animateOut: 'fadeOut',
        autoplay: true,
        lazyLoad: true,
        smartSpeed: 1000,
        autoplayTimeout: 7000
        //autoplaySpeed: true,
    });

I think, it is correct, hovewer the autoplayTimeout does not work. Why? Owl carousel 2, ver. 2.3.4.

Upvotes: 0

Views: 2673

Answers (1)

D A
D A

Reputation: 2072

Works just fine as I told you and here you have an example with your settings:

var owl = $('.owl-carousel');
owl.owlCarousel({
    items: 1,
        loop: true,
        nav: true,
        margin: 0,
        dots: true,
        // animateIn: 'fadeIn',
        // animateOut: 'fadeOut',
        autoplay: true,
        lazyLoad: true,
        smartSpeed: 1000,
        autoplayTimeout: 7000
        //autoplaySpeed: true,
});
.item1
{
height:200px;
background-color:red;
}
.item2
{
height:200px;
background-color:blue;
}
.item3
{
height:200px;
background-color:magenta;
}
.item4
{
height:200px;
background-color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">

<div class="owl-carousel owl-theme">
            <div class="item1">
              <h4>1</h4>
            </div>
            <div class="item2">
              <h4>2</h4>
            </div>
            <div class="item3">
              <h4>3</h4>
            </div>
            <div class="item4">
              <h4>4</h4>
            </div>
            
          </div>

Upvotes: 1

Related Questions