varun sharma varun sharma - 1 month ago 26
HTML Question

Set interval for autoplay carousel in materialize design

Right now i am using materialize design framework for User interface. And i am using carousel in materialize but carousel image is not move or auto play. I want to set some interval of time to auto play images.



$('.carousel').carousel({
dist:0,
shift:0,
padding:20,
interval:100
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>


<div class="carousel">
<a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>




Answer

You are using a very old version of jquery, change it for a newer and this example work, and if you want that the transition could be automatic you could use an interval and go to the next using the carousel method.

$(document).ready(function(){
        $('.carousel').carousel({dist:0});
        window.setInterval(function(){$('.carousel').carousel('next')},500)
     });
div.carousel a.carousel-item{
  width: 50px;  
}
img{
  height: 50px;
  width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css">
           
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
        <div class="carousel">
            <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
            <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
            <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
            <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
            <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
        </div>