CODEWITHSUNDEEP
jqueryhtmlpluginsslick.js
rBai
rBai

Reputation: 35

slick carousel not appearing

This is the first time I implement libraries to my code and so far it hasn't been going well. I have tried everything, however the slick carousel doesn't seem to appear, I know there is something I'm missing but because this is my first time, I have no idea of what I may be doing wrong. This is my code:

<!DOCTYPE html>
<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/style.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="autoplay">
    <div><img src="http://placehold.it/350x300?text=1"></div>
    <div><img src="http://placehold.it/350x300?text=2"></div>
    <div><img src="http://placehold.it/350x300?text=3"></div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//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">
    $(document).ready(function(){
      $('.autoplay').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    });
  });
  </script>

  </body>
</html>

this is my folder structure: http://prntscr.com/ccgney

and this is the outcome: http://prntscr.com/ccgm9e

Upvotes: 2

Views: 880

Answers (2)

Off
Off

Reputation: 199

The browser is not able to access to jquery sources, you need to change your include as the following :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

For this kind of things always keep in mind to check your web console 👍

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

Add more slide its working 

<div class="autoplay">
    <div><img src="http://placehold.it/350x300?text=1"></div>
    <div><img src="http://placehold.it/350x300?text=2"></div>
    <div><img src="http://placehold.it/350x300?text=3"></div>
     <div><img src="http://placehold.it/350x300?text=1"></div>
    <div><img src="http://placehold.it/350x300?text=2"></div>
    <div><img src="http://placehold.it/350x300?text=3"></div>
  </div>

Add some custom CSS

.slick-next{right:15px}
.slick-prev{left:5px; z-index:9;}

https://jsfiddle.net/6nb29zym/

Upvotes: 0

Related Questions