javascript - 在 html/css 中从最后到第一个的触摸 Action 移动

Question

我在旋转木马中使用触摸 Action 属性，它也会自动滑动并且没有问题。我想做的是，当我使用触摸 Action 滚动 slider 时，它会滑动，但当它出现在最后一张幻灯片上时，它会停止。我只是想要那个，它不会停止并来到第一张幻灯片。

这是我的 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
    });
});

Answer 1

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 Fiddle 预览:https://jsfiddle.net/itsselvam/eaq0978s/