JavaScript
x
24
24
1
$(document).ready(function (){2
$('.owl-carousel').owlCarousel({3
items:5,4
center:true,5
autoplay:true,6
autoPlayTimeout:1000,7
autoplaySpeed:3000,8
autoHeight:true,9
autoplayHoverPause:false,10
loop:true,11
// smartSpeed:1000,12
margin:5,13
responsive:{14
480:{15
items:3,16
margin:217
},18
919:{19
items:4,20
margin:421
}22
}23
});24
});JavaScript
1
27
27
1
.main-content {2
position: relative;3
}4
.main-content .owl-theme .custom-nav {5
position: absolute;6
top: 20%;7
left: 0;8
right: 0;9
}10
.main-content .owl-theme .custom-nav .owl-prev, .main-content .owl-theme .custom-nav .owl-next {11
position: absolute;12
height: 100px;13
color: inherit;14
background: none;15
border: none;16
z-index: 100;17
}18
.main-content .owl-theme .custom-nav .owl-prev i, .main-content .owl-theme .custom-nav .owl-next i {19
font-size: 2.5rem;20
color: #cecece;21
}22
.main-content .owl-theme .custom-nav .owl-prev {23
left: 0;24
}25
.main-content .owl-theme .custom-nav .owl-next {26
right: 0;27
}JavaScript
1
218
218
1
<!DOCTYPE html>2
<html lang="en" >3
<head>4
<meta charset="UTF-8">5
<title>CodePen - Owl Carousel 2 Navigation on Sides - Left and Right</title>6
7
<link rel="stylesheet" href="./style.css">8
9
<style>10
.owl-carousel,.owl-carousel .owl-item11
{-webkit-tap-highlight-color:transparent;12
position:relative}13
14
.owl-carousel15
{display:none;16
width:100%;17
z-index:1}18
19
.owl-carousel .owl-stage20
{position:relative;21
-ms-touch-action:pan-Y;22
touch-action:manipulation;23
-moz-backface-visibility:hidden}24
25
.owl-carousel .owl-stage:after26
{content:".";27
display:block;28
clear:both;29
visibility:hidden;30
line-height:0;31
height:0}32
33
.owl-carousel .owl-stage-outer34
{position:relative;35
overflow:hidden;36
-webkit-transform:translate3d(0,0,0)}37
38
.owl-carousel .owl-item,.owl-carousel .owl-wrapper39
{-webkit-backface-visibility:hidden;40
-moz-backface-visibility:hidden;41
-ms-backface-visibility:hidden;42
-webkit-transform:translate3d(0,0,0);43
-moz-transform:translate3d(0,0,0);44
-ms-transform:translate3d(0,0,0)}45
46
.owl-carousel .owl-item47
{min-height:1px;48
float:left;49
-webkit-backface-visibility:hidden;50
-webkit-touch-callout:none}51
52
53
.owl-carousel .owl-item img54
{display:block;55
width:100%}56
57
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled58
{display:none}59
60
.no-js .owl-carousel,.owl-carousel.owl-loaded61
{display:block}62
63
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev64
{cursor:pointer;65
-webkit-user-select:none;66
-khtml-user-select:none;67
-moz-user-select:none;68
-ms-user-select:none;69
user-select:none}70
71
.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot72
{background:0 0;73
color:inherit;74
border:none;75
padding:0!important;76
font:inherit}77
78
.owl-carousel.owl-loading79
{opacity:0;80
display:block}81
82
.owl-carousel.owl-hidden83
{opacity:0}84
85
.owl-carousel.owl-refresh .owl-item86
{visibility:hidden}87
88
.owl-carousel.owl-drag .owl-item89
{-ms-touch-action:pan-y;90
touch-action:pan-y;91
-webkit-user-select:none;92
-moz-user-select:none;93
-ms-user-select:none;94
user-select:none}95
96
.owl-carousel.owl-grab97
{cursor:move;98
cursor:grab}99
100
.owl-carousel.owl-rtl101
{direction:rtl}102
103
.owl-carousel.owl-rtl .owl-item104
{float:right}105
106
.owl-carousel .animated107
{animation-duration:1s;108
animation-fill-mode:both}109
110
.owl-carousel .owl-animated-in111
{z-index:0}112
113
.owl-carousel .owl-animated-out114
{z-index:1}115
116
.owl-carousel .fadeOut117
{animation-name:fadeOut}118
119
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}120
121
.owl-height{transition:height .5s ease-in-out}122
123
.owl-carousel .owl-item .owl-lazy124
{opacity:0;125
transition:opacity .4s ease}126
127
.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}128
129
.owl-carousel .owl-item img.owl-lazy130
{transform-style:preserve-3d}131
132
.owl-carousel .owl-video-wrapper133
{position:relative;134
height:100%;135
background:#000}136
137
.owl-carousel .owl-video-play-icon138
{position:absolute;139
height:80px;140
width:80px;141
left:50%;142
top:50%;143
margin-left:-40px;144
margin-top:-40px;145
background:url(owl.video.play.png) no-repeat;146
cursor:pointer;147
z-index:1;148
-webkit-backface-visibility:hidden;149
transition:transform .1s ease}150
151
.owl-carousel .owl-video-play-icon:hover152
{-ms-transform:scale(1.3,1.3);153
transform:scale(1.3,1.3)}154
155
.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn156
{display:none}157
158
.owl-carousel .owl-video-tn159
{opacity:0;160
height:100%;161
background-position:center center;162
background-repeat:no-repeat;163
background-size:contain;164
transition:opacity .4s ease}165
166
.owl-carousel .owl-video-frame167
{position:relative;168
z-index:1;169
height:100%;170
width:100%}171
172
</style>173
174
175
</head>176
<body>177
<!-- partial:index.partial.html -->178
<div class="owl-carousel">179
<div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>180
<div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>181
<div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>182
<div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>183
<div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>184
<div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>185
<div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>186
<div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>187
</div>188
<!-- partial -->189
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>190
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>191
192
<script>193
$(document).ready(function (){194
$('.owl-carousel').owlCarousel({195
items:5,196
center:true,197
autoplay:true,198
autoPlayTimeout:1000,199
autoplaySpeed:3000,200
autoHeight:true,201
autoplayHoverPause:false,202
loop:true,203
// smartSpeed:1000,204
margin:5,205
responsive:{206
480:{207
items:3208
},209
919:{210
items:4211
}212
}213
});214
});215
</script>216
217
</body>218
</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?
Advertisement
Answer
You can try this code. First time it will change slide after 6 seconds.
JavaScript
1
21
21
1
$('.owl-carousel').owlCarousel({2
items:5,3
center:true,4
autoplay:true,5
autoPlayTimeout:100,6
autoplaySpeed:6000,7
autoHeight:true,8
autoplayHoverPause:false,9
loop:true,10
// smartSpeed:1000,11
margin:5,12
responsive:{13
480:{14
items:315
},16
919:{17
items:418
}19
}20
});21