javascript - Set interval for autoplay carousel in materialize design - Stack Overflow

admin管理员组

文章数量:1289910

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=".6.3/jquery.min.js"></script>
<link href=".97.6/css/materialize.min.css" rel="stylesheet" type="text/css">
   
<script src=".97.6/js/materialize.min.js"></script>


 <div class="carousel">
    <a class="carousel-item" href="#one!"><img src=""></a>
    <a class="carousel-item" href="#two!"><img src=""></a>
    <a class="carousel-item" href="#three!"><img src=""></a>
    <a class="carousel-item" href="#four!"><img src=""></a>
    <a class="carousel-item" href="#five!"><img src=""></a>

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./ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css">
   
<script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>


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

• javascript
• jquery
• html
• css
• materialize

Share Improve this question Follow asked Apr 18, 2016 at 12:23 Varun SharmaVarun Sharma 4,8421313 gold badges5555 silver badges105105 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The Materialize Carousel doesn't have an autoplay feature; I think it's designed to stay static until the user interacts with it.

It does however expose methods to move to the next slide so you could create an interval to update the carousel to the next slide e.g.

setInterval(function(){
  $('.carousel').carousel('next');
}, 1000);

You might want to name the callback for setInterval so you can clear it if you want the user to stop the carousel rotating if it bees annoying.

Here's a quick JSFiddle to demonstrate.

$(document).ready(function(){
    var carousel_interval = 1000;
    $('.carousel').carousel();
    var int;
    function run(){
        int = setInterval(function()
        { 
            $('.carousel').carousel('next');
        }, carousel_interval);
    }
    function stop(){
    clearInterval(int);
    }
    $('.carousel').hover(stop, run);     
    }); 

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link href="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css">
           
        <script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
        <div class="carousel">
            <a class="carousel-item" href="#one!"><img src="http://lorempixel./250/250/nature/1"></a>
            <a class="carousel-item" href="#two!"><img src="http://lorempixel./250/250/nature/2"></a>
            <a class="carousel-item" href="#three!"><img src="http://lorempixel./250/250/nature/3"></a>
            <a class="carousel-item" href="#four!"><img src="http://lorempixel./250/250/nature/4"></a>
            <a class="carousel-item" href="#five!"><img src="http://lorempixel./250/250/nature/5"></a>
        </div>

本文标签： javascriptSet interval for autoplay carousel in materialize designStack Overflow