Question

虽然我发现同样的question 4 years back没有得到我想要的答案，但我是新编码，我在Google的帮助下编写此代码，我的滑块在前端看起来不错，我可以拖下一张幻灯片的滑块但不会自动滑动。

我的代码如下：

<div class="block_banner_top">
<div class="container">
<div class="row">
<div class="wrap_item">
<div class="item"><a href="#"> <img alt="" src="{{media url='home/slide01.jpg'}}" /> </a>
<div class="info"><a class="title" href="#">Rewards</a> 
<p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
</div>
</div>
<div class="item"><a href="#"> <img alt="" src="{{media url='home/slide02.jpg'}}" /> </a>
<div class="info"><a class="title" href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
</div>
</div>
<div class="item"><a href="#"> <img alt="" src="{{media url='home/slide03.jpg'}}" /> </a>
<div class="info"><a class="title" href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
</div>
</div>
<div class="item"><a href="#"> <img alt="" src="{{media url='home/slide04.jpg'}}" /> </a>
<div class="info"><a class="title" href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
</div>
</div>

</div>
</div>

</div>
</div>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($) {        
        $('.block_banner_top div.wrap_item').owlCarousel({
            items: 1,
            itemsCustom: [ 
                [0, 1], 
                [480, 1], 
                [768, 1], 
                [992, 1], 
                [1200, 1] 
            ],
            pagination: true,
            slideSpeed : 4000,
            addClassActive: true,
            scrollPerPage: true,
            touchDrag: false,
        });

    });
// ]]></script>

Answer 1

如果我理解你的问题。

默认情况下，禁用owl轮播的autoplay选项或将其设置为false。所以你需要将它设置为真inoder到自动播放。您可以参考有关自动播放here

的猫头鹰轮播文档

有些人报告了有关自动播放案例的一些错误。最好使用autoPlay autoplay插入jQuery(document).ready(function($) { $('.block_banner_top div.wrap_item').owlCarousel({ items: 1, itemsCustom: [ [0, 1], [480, 1], [768, 1], [992, 1], [1200, 1] ], pagination: true, slideSpeed: 4000, addClassActive: true, scrollPerPage: true, touchDrag: false, autoPlay:true, autoplayTimeout: 1000 }); });。您可以使用lorempixel中的一些图像查看下面问题的更新代码，以便更好地理解。

希望这会有所帮助

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<div class="block_banner_top">
  <div class="container">
    <div class="row">
      <div class="wrap_item">
        <div class="item">
          <a href="#"> <img alt="" src="http://lorempixel.com/400/200/sports/1/" /> </a>
          <div class="info"><a class="title" href="#">Rewards</a>
            <p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
          </div>
        </div>
        <div class="item">
          <a href="#"> <img alt="" src="http://lorempixel.com/400/200/sports/2/" /> </a>
          <div class="info"><a class="title" href="#">Lorem ipsum</a>
            <p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
          </div>
        </div>
        <div class="item">
          <a href="#"> <img alt="" src="http://lorempixel.com/400/200/sports/3/" /> </a>
          <div class="info"><a class="title" href="#">Lorem ipsum</a>
            <p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
          </div>
        </div>
        <div class="item">
          <a href="#"> <img alt="" src="http://lorempixel.com/400/200/sports/4/" /> </a>
          <div class="info"><a class="title" href="#">Lorem ipsum</a>
            <p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>

＆＃13;

$(window).on("scroll", function() {
    if($("body").scrollTop() < $(".section").offset().top) {
        hasScrolled = false;
    } else {
        hasScrolled = true;
    }
});

＆＃13;

JavaScript滑块不起作用，Magento静态块

1 个答案: