Question

我在网站上使用owl carousel v2.2.0作为项目列表。转盘滚动到最后一个项目后，它将停留在那里。我希望它循环回到第一项并保持循环而不是在最后一项停止。我尝试更改循环：将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
});

猫头鹰旋转木马循环最后一项回到第一项

2 个答案: