vendredi 11 octobre 2019

Image slider made with JQuery slickjs not working

Image slider is just showing the first image. The images are supposed to slide at an interval of 2000 micro seconds. The codes are mentioned blow. The html codes and js codes are below. Why is it now working as expected?

    <script type="text/javascript">
    $(document).ready(function(){
    $('.carousel').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    });
    });
    </script>
    </head>
    <body>

    <div class="carousel">
    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" 
    class="active"> 
    </li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
    <div class="carousel-item active">
    <img src="images/sonevajani.jpg" alt="First Slide">
    </div>
    <div class="carousel-item">
    <img src="images/watervilla.jpg" alt="Second Slide">
    </div>
    <div class="carousel-item">
    <img src="images/centara.jpg" alt="Third Slide">
    </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" data- 
    slide="prev">
    <span class="carousel-control-prev-icon"></span></a>
    <a class="carousel-control-next" href="#myCarousel" data- 
    slide="next">
    <span class="carousel-control-next-icon"></span></a>
    </div>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery- 
    1.11.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery- 
    migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script type="text/javascript" src="slick/slick.js"></script>
    </body>   
    </html>


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire