我在轮播中使用了触摸动作属性,它也会自动滑动,因此没有问题。我想做的是,当我使用触摸动作滚动滑块时,它会滑动,但是在最后一次滑动时,它会停止。我只是想要那样,它并没有停止,而是来到了第一张幻灯片。

这是我的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/

10-09 15:31
查看更多