I am using owl carousel v2.2.0 for a list of projects on my website. After the carousel scrolls to the last item it stays there. I would like it to loop back to the first item and keep looping instead of stopping at last item. I tried changing loop: false to true but that did nothing. This is my code:
Owl.Defaults = {
items: 3,
loop: false,
center: false,
rewind: false,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
freeDrag: false,
margin: 0,
stagePadding: 0,
merge: false,
mergeFit: true,
autoWidth: false,
startPosition: 0,
rtl: false,
smartSpeed: 250,
fluidSpeed: false,
dragEndSpeed: false,
responsive: {},
responsiveRefreshRate: 200,
responsiveBaseElement: window,
fallbackEasing: 'swing',
info: false,
nestedItemSelector: false,
itemElement: 'div',
stageElement: 'div',
refreshClass: 'owl-refresh',
loadedClass: 'owl-loaded',
loadingClass: 'owl-loading',
rtlClass: 'owl-rtl',
responsiveClass: 'owl-responsive',
dragClass: 'owl-drag',
itemClass: 'owl-item',
stageClass: 'owl-stage',
stageOuterClass: 'owl-stage-outer',
grabClass: 'owl-grab'
};
and this is the html:
<!--Project Section-->
<section class="project-section-three">
<div class="auto-container">
<!--Sec Title-->
<div class="sec-title light">
<h2>Latest Projects</h2>
<div class="separator"></div>
</div>
<div class="three-item-carousel owl-carousel owl-theme">
<!--Project Block Four-->
<div class="project-block-four">
<div class="inner-box">
<div class="image">
<a href="projects/project-1.html"><img src="images/resource/project-1.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h3><a href="projects/project-1.html">US Gas Company</a></h3>
<div class="text">Teachings of the great explorer of the truth, builder of human happiness.</div>
<a href="projects/project-1.html" class="read-more">Read More <span class="icon flaticon-arrow-pointing-to-right"></span></a>
</div>
</div>
</div>
<!--Project Block Four-->
<div class="project-block-four">
<div class="inner-box">
<div class="image">
<a href="projects/project-4.html"><img src="images/resource/project-6.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h3><a href="projects/project-4.html">Golden Gate Bridge</a></h3>
<div class="text">Except to obtain some advantage from it? But who has any right to find fault.</div>
<a href="projects/project-4.html" class="read-more">Read More <span class="icon flaticon-arrow-pointing-to-right"></span></a>
</div>
</div>
</div>
<!--Project Block Four-->
<div class="project-block-four">
<div class="inner-box">
<div class="image">
<a href="projects/project-4.html"><img src="images/resource/project-6.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h3><a href="projects/project-4.html">Golden Gate Bridge</a></h3>
<div class="text">Except to obtain some advantage from it? But who has any right to find fault.</div>
<a href="projects/project-4.html" class="read-more">Read More <span class="icon flaticon-arrow-pointing-to-right"></span></a>
</div>
</div>
</div>
<!--Project Block Four-->
<div class="project-block-four">
<div class="inner-box">
<div class="image">
<a href="projects/project-4.html"><img src="images/resource/project-6.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h3><a href="projects/project-4.html">Golden Gate Bridge</a></h3>
<div class="text">Except to obtain some advantage from it? But who has any right to find fault.</div>
<a href="projects/project-4.html" class="read-more">Read More <span class="icon flaticon-arrow-pointing-to-right"></span></a>
</div>
</div>
</div>
<!--Project Block Four-->
<div class="project-block-four">
<div class="inner-box">
<div class="image">
<a href="projects/project-4.html"><img src="images/resource/project-6.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h3><a href="projects/project-4.html">Golden Gate Bridge</a></h3>
<div class="text">Except to obtain some advantage from it? But who has any right to find fault.</div>
<a href="projects/project-4.html" class="read-more">Read More <span class="icon flaticon-arrow-pointing-to-right"></span></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--End Project Section-->
Here's an example with some settings that might help
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : (enter your number of slides),
rewindNav:false //**This
});
This is obviously jQuery, but you should be able to add autoPlay with an interval into your Owl.Defaults list, then change rewind to rewindNav:false. This should get you a seamless autoplay.