I'm have trouble with a bootstrap template I have downloaded. The theme is "REVEAL". In the logo part, the slide should use infinite loop, but at the last logo it jumps directly and does not continue to the first one . Can anyone help?
Trying to make the loop as "TRUE".
<div class="owl-carousel clients-carousel">
<img src="img/clients/client-1.png" alt="">
<img src="img/clients/client-2.png" alt="">
<img src="img/clients/client-3.png" alt="">
<img src="img/clients/client-4.png" alt="">
<img src="img/clients/client-5.png" alt="">
<img src="img/clients/client-6.png" alt="">
<img src="img/clients/client-7.png" alt="">
<img src="img/clients/client-8.png" alt="">
</div>
</script type="text/javascript">
$(".clients-carousel").owlCarousel({
autoplay: true,
dots: true,
loop: true,
autoplayTimeout:2000,
responsive: {
0: {
items: 2
},
768: {
items: 4
},
900: {
items: 6
}
}
});
</script>
As mentioned in comment by @Flo, you've typo while opening the <script>
tag. Also, from documentation:
You don't need any special markup. All you need is to wrap your divs(owl works with any type element a/img/span..) inside the container element . Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file. If you want the default nav controls like dots or buttons, you must also include the "owl-theme" class on that same div.
Here's working example:
<div class="owl-carousel">
<img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-1.png" alt="">
<img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-2.png" alt="">
<img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-3.png" alt="">
<img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-4.png" alt="">
<img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-5.png" alt="">
<img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-6.png" alt="">
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha256-kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
autoplay: true,
dots: true,
loop: true,
autoplayTimeout:2000,
responsive: {
0: {
items: 2
},
768: {
items: 4
},
900: {
items: 6
}
},
});
});
</script>
EDIT
The Bootstrap template, you're using, uses older version 2.3.2
of the Owl Carousel. I recommend updating to latest version.
It seems like, in older versions to make the infinite loop work properly, you need to set checkVisibility
option, as mentioned in this issue.
So, in addition to your other options, set:
checkVisibility: true