我在轮播中使用了触摸动作属性,它也会自动滑动,因此没有问题。我想做的是,当我使用触摸动作滚动滑块时,它会滑动,但是在最后一次滑动时,它会停止。我只是想要那样,它并没有停止,而是来到了第一张幻灯片。
这是我的HTML:
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<div class="pic">
<img src="image/pay.png">
</div>
<h3 class="title">Williamson</h3>
<span class="post">Web Developer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
</div>
<div class="testimonial">
<div class="pic">
<img src="image/pay.png">
</div>
<h3 class="title">Kristina</h3>
<span class="post">Web Designer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
</div>
</div>
这是我的css:
.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel{display:none;position:relative;width:100%;touch-action:default;}
.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}
.owl-carousel .owl-item{float:left}.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.grabbing{cursor:url(grabbing.png) 8 8,move}
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{-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)}
这是我的脚本:
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:1,
itemsDesktop:[1000,1],
itemsDesktopSmall:[979,1],
itemsTablet:[768,1],
transitionStyle:"backSlide",
autoPlay:true
});
});
最佳答案
Owl Carousel具有内置循环选项,只需使用loop:true
参考文档:https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:1,
itemsDesktop:[1000,1],
itemsDesktopSmall:[979,1],
itemsTablet:[768,1],
transitionStyle:"backSlide",
autoplay:true,
loop:true // for looping ref https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
});
});
JS小提琴预览:https://jsfiddle.net/itsselvam/eaq0978s/
关于javascript - 触摸 Action 从html/css中的最后一个移动到第一个,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53646381/