我正在使用 owl carousel v2.2.0 来获取我网站上的项目列表。在轮播滚动到最后一个项目后,它会停留在那里。我希望它循环回到第一项并继续循环而不是在最后一项停止。 我尝试将 loop: false 更改为 true 但那什么也没做。 这是我的代码:
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'
};
这是 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-->
最佳答案
这是一个示例,其中包含一些可能有帮助的设置
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : (enter your number of slides),
rewindNav:false //**This
});
这显然是 jQuery,但您应该能够将带有间隔的 autoPlay
添加到您的 Owl.Defaults
列表中,然后更改 rewind
到 rewindNav:false
。这应该可以让您无缝自动播放。
关于javascript - 猫头鹰轮播将最后一项循环回第一项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51678673/