Search code examples
jquerymagentostaticsliderblock

JavaScript slider not working, Magento static block

Although I found the same question 4 years back which hasn't been answered what I am looking for, I am new in coding, I write this code with help of Google, my slider looks OK in frontend, I can drag the slider for next slide but not automatically sliding.

My code below: 

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

  • If i understand your issue correcly.

    By default the autoplay option for the owl carousel is disabled or set to false. so you need to set it to true inoder to autoplay. you can refer the owl carousel documentation regarding autoplay here

    Some people report some bugs regarding the case of the autoplay. it is better to use autoPlay inseted of autoplay. you can see the updated code of your issue below with some images from lorempixel for better understanding.

    Hope this will help

    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>