JavaScript 滑块不工作，Magento 静态块

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。所以你需要将它设置为 true inode 才能自动播放。你可以参考 owl carousel documentation about autoplay here

有些人报告了一些关于自动播放的错误。最好使用 autoplay 的 autoPlay 插入。您可以在下面看到问题的更新代码以及来自 lorempixel 的一些图像，以便更好地理解。

希望这会有所帮助

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
  });

});

<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>

JavaScript 滑块不工作，Magento 静态块

JavaScript slider not working, Magento static block

jquery

static

block

slider

magento