CODEWITHSUNDEEP
javascripthtmljquerycss
user13851719
user13851719

Reputation: 150

Owl carousel auto play without delay

$(document).ready(function (){
          $('.owl-carousel').owlCarousel({
            items:5,
            center:true,
            autoplay:true,
            autoPlayTimeout:1000,
            autoplaySpeed:3000,
            autoHeight:true,
            autoplayHoverPause:false,
            loop:true,
            // smartSpeed:1000,
            margin:5,
            responsive:{
                480:{
                  items:3,
                  margin:2
                },
                919:{
                    items:4,
                    margin:4
                }
            }
          });
      });
.main-content {
  position: relative;
}
.main-content .owl-theme .custom-nav {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
}
.main-content .owl-theme .custom-nav .owl-prev, .main-content .owl-theme .custom-nav .owl-next {
  position: absolute;
  height: 100px;
  color: inherit;
  background: none;
  border: none;
  z-index: 100;
}
.main-content .owl-theme .custom-nav .owl-prev i, .main-content .owl-theme .custom-nav .owl-next i {
  font-size: 2.5rem;
  color: #cecece;
}
.main-content .owl-theme .custom-nav .owl-prev {
  left: 0;
}
.main-content .owl-theme .custom-nav .owl-next {
  right: 0;
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Owl Carousel 2 Navigation on Sides - Left and Right</title>

<link rel="stylesheet" href="./style.css">

<style>
.owl-carousel,.owl-carousel .owl-item
{-webkit-tap-highlight-color:transparent;
position:relative}

.owl-carousel
{display:none;
width:100%;
z-index:1}

.owl-carousel .owl-stage
{position:relative;
-ms-touch-action:pan-Y;
touch-action:manipulation;
-moz-backface-visibility:hidden}

.owl-carousel .owl-stage:after
{content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0}

.owl-carousel .owl-stage-outer
{position:relative;
overflow:hidden;
-webkit-transform:translate3d(0,0,0)}

.owl-carousel .owl-item,.owl-carousel .owl-wrapper
{-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0)}

.owl-carousel .owl-item
{min-height:1px;
float:left;
-webkit-backface-visibility:hidden;
-webkit-touch-callout:none}


.owl-carousel .owl-item img
{display:block;
width:100%}

.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled
{display:none}

.no-js .owl-carousel,.owl-carousel.owl-loaded
{display:block}

.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev
{cursor:pointer;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none}

.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot
{background:0 0;
color:inherit;
border:none;
padding:0!important;
font:inherit}

.owl-carousel.owl-loading
{opacity:0;
display:block}

.owl-carousel.owl-hidden
{opacity:0}

.owl-carousel.owl-refresh .owl-item
{visibility:hidden}

.owl-carousel.owl-drag .owl-item
{-ms-touch-action:pan-y;
touch-action:pan-y;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none}

.owl-carousel.owl-grab
{cursor:move;
cursor:grab}

.owl-carousel.owl-rtl
{direction:rtl}

.owl-carousel.owl-rtl .owl-item
{float:right}

.owl-carousel .animated
{animation-duration:1s;
animation-fill-mode:both}

.owl-carousel .owl-animated-in
{z-index:0}

.owl-carousel .owl-animated-out
{z-index:1}

.owl-carousel .fadeOut
{animation-name:fadeOut}

@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}

.owl-height{transition:height .5s ease-in-out}

.owl-carousel .owl-item .owl-lazy
{opacity:0;
transition:opacity .4s ease}

.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}

.owl-carousel .owl-item img.owl-lazy
{transform-style:preserve-3d}

.owl-carousel .owl-video-wrapper
{position:relative;
height:100%;
background:#000}

.owl-carousel .owl-video-play-icon
{position:absolute;
height:80px;
width:80px;
left:50%;
top:50%;
margin-left:-40px;
margin-top:-40px;
background:url(owl.video.play.png) no-repeat;
cursor:pointer;
z-index:1;
-webkit-backface-visibility:hidden;
transition:transform .1s ease}

.owl-carousel .owl-video-play-icon:hover
{-ms-transform:scale(1.3,1.3);
transform:scale(1.3,1.3)}

.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn
{display:none}

.owl-carousel .owl-video-tn
{opacity:0;
height:100%;
background-position:center center;
background-repeat:no-repeat;
background-size:contain;
transition:opacity .4s ease}

.owl-carousel .owl-video-frame
{position:relative;
z-index:1;
height:100%;
width:100%}

</style>


</head>
<body>
<!-- partial:index.partial.html -->
   <div class="owl-carousel">
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    </div>
<!-- partial -->
  <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>

<script>
$(document).ready(function (){
          $('.owl-carousel').owlCarousel({
            items:5,
            center:true,
            autoplay:true,
            autoPlayTimeout:1000,
            autoplaySpeed:3000,
            autoHeight:true,
            autoplayHoverPause:false,
            loop:true,
            // smartSpeed:1000,
            margin:5,
            responsive:{
                480:{
                  items:3
                },
                919:{
                    items:4
                }
            }
          });
      });
</script>

</body>
</html>

as you can see this owl carousel has a delay. I think there doesn't have animation-delay code but it moves after a few second delay

where should I fix it? or what should I add to this code? to make it play without any delay.

if there isn't have any way to remove this delay then can you advise me how to make delay time to be short?

Upvotes: 2

Views: 4571

Answers (3)

Minal Chauhan
Minal Chauhan

Reputation: 6158

you need to adjust autoPlayTimeout and autoplaySpeed

$(document).ready(function (){
  $('.owl-carousel').owlCarousel({
    items:5,
      center:true,
      autoplay:true,
      autoPlayTimeout:500,
      autoplaySpeed:5500,
      autoHeight:true,
      autoplayHoverPause:false,
      loop:true,
      // smartSpeed:1000,
      margin:5,
      responsive:{
          480:{
            items:3
          },
          919:{
              items:4
          }
      }
  });
});
.main-content {
  position: relative;
}
.main-content .owl-theme .custom-nav {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
}
.main-content .owl-theme .custom-nav .owl-prev, .main-content .owl-theme .custom-nav .owl-next {
  position: absolute;
  height: 100px;
  color: inherit;
  background: none;
  border: none;
  z-index: 100;
}
.main-content .owl-theme .custom-nav .owl-prev i, .main-content .owl-theme .custom-nav .owl-next i {
  font-size: 2.5rem;
  color: #cecece;
}
.main-content .owl-theme .custom-nav .owl-prev {
  left: 0;
}
.main-content .owl-theme .custom-nav .owl-next {
  right: 0;
}

.owl-carousel,.owl-carousel .owl-item {
  -webkit-tap-highlight-color:transparent;
  position:relative;
}

.owl-carousel {
  display:none;
  width:100%;
  z-index:1;
}

.owl-carousel .owl-stage {
  position:relative;
  -ms-touch-action:pan-Y;
  touch-action:manipulation;
  -moz-backface-visibility:hidden;
}

.owl-carousel .owl-stage:after {
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  line-height:0;
  height:0;
}

.owl-carousel .owl-stage-outer {
  position:relative;
  overflow:hidden;
  -webkit-transform:translate3d(0,0,0);
}

.owl-carousel .owl-item,.owl-carousel .owl-wrapper {
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  -ms-transform:translate3d(0,0,0);
}

.owl-carousel .owl-item {
  min-height:1px;
  float:left;
  -webkit-backface-visibility:hidden;
  -webkit-touch-callout:none;
}


.owl-carousel .owl-item img {
  display:block;
  width:100%;
}

.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled {
  display:none;
}

.no-js .owl-carousel,.owl-carousel.owl-loaded {
  display:block;
}

.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev {
  cursor:pointer;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot {
  background:0 0;
  color:inherit;
  border:none;
  padding:0!important;
  font:inherit;
}

.owl-carousel.owl-loading {
  opacity:0;
  display:block;
}

.owl-carousel.owl-hidden {
o pacity:0;
}

.owl-carousel.owl-refresh .owl-item {
visibility:hidden;
}

.owl-carousel.owl-drag .owl-item {
  -ms-touch-action:pan-y;
  touch-action:pan-y;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.owl-carousel.owl-grab {
  cursor:move;
  cursor:grab;
}

.owl-carousel.owl-rtl {
  direction:rtl;
}

.owl-carousel.owl-rtl .owl-item {
  float:right;
}

.owl-carousel .animated {
  animation-duration:1s;
  animation-fill-mode:both;
}

.owl-carousel .owl-animated-in {
  z-index:0;
}

.owl-carousel .owl-animated-out {
  z-index:1;
}

.owl-carousel .fadeOut {
  animation-name:fadeOut;
}

@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}

.owl-height {
  transition:height .5s ease-in-out;
}

.owl-carousel .owl-item .owl-lazy {
  opacity:0;
  transition:opacity .4s ease;
}

.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""] {
  max-height:0;
}

.owl-carousel .owl-item img.owl-lazy {
  transform-style:preserve-3d;
}

.owl-carousel .owl-video-wrapper {
  position:relative;
  height:100%;
  background:#000;
}

.owl-carousel .owl-video-play-icon {
  position:absolute;
  height:80px;
  width:80px;
  left:50%;
  top:50%;
  margin-left:-40px;
  margin-top:-40px;
  background:url(owl.video.play.png) no-repeat;
  cursor:pointer;
  z-index:1;
  -webkit-backface-visibility:hidden;
  transition:transform .1s ease;
}

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform:scale(1.3,1.3);
  transform:scale(1.3,1.3); 
}

.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn 
  display:none;
}

.owl-carousel .owl-video-tn {
  opacity:0;
  height:100%;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  transition:opacity .4s ease;
}

.owl-carousel .owl-video-frame {
  position:relative;
  z-index:1;
  height:100%;
  width:100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet">
    
<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>

<div class="owl-carousel">
  <div class="item">
    <img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" >
  </div>
  <div class="item">
    <img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" >    
  </div>
  <div class="item">
    <img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" >
  </div>
  <div class="item">
    <img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" >
  </div>
  <div class="item">
    <img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" >
  </div>
  <div class="item">
    <img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" >
  </div>
  <div class="item">
    <img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" >
  </div>
  <div class="item">
    <img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" >
  </div>
</div>

Upvotes: 1

DVS
DVS

Reputation: 326

You can try this code. First time it will change slide after 6 seconds.

$('.owl-carousel').owlCarousel({
        items:5,
        center:true,
        autoplay:true,
        autoPlayTimeout:100,
        autoplaySpeed:6000,
        autoHeight:true,
        autoplayHoverPause:false,
        loop:true,
        // smartSpeed:1000,
        margin:5,
        responsive:{
            480:{
              items:3
            },
            919:{
                items:4
            }
        }
      });

Upvotes: 2

Đỗ văn Thắng
Đỗ văn Thắng

Reputation: 185

You should try: autoPlayTimeout:0 or autoplaySpeed:0

Upvotes: 1

Related Questions