Owl 轮播循环最后一项回到第一项

Question

我正在使用 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-->

Answer 1

这是一个示例，其中包含一些可能有用的设置

$("#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.这应该可以让您无缝自动播放。

Answer 2

参考资料：

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

$('#owl-demo').owlCarousel({
    loop: false,
    rewind: true
});

Owl 轮播循环最后一项回到第一项

Owl Carousel loop last item back to first item

html

javascript

owl-carousel-2