JavaScriptスライダが動作しない、Magentoスタティックブロック

Question

私が探しているものと同じquestion 4 years backが見つかりましたが、私はコーディングで新しく、私はこのコードをGoogleの助けを借りて書いています。 、私は次のスライドのためにスライダをドラッグできますが、自動的にスライドしません。以下

マイコード：私はcorreclyあなたの問題を理解していれば

<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 inoderに設定する必要があります。 自動再生に関するフクロウのカルーセルのドキュメントを参照できます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>