CODEWITHSUNDEEP
jquerysliderslick.js
Bailey
Bailey

Reputation: 143

How do I get my Slick Image Slider to work?

I'm trying to get my slick image slider to work and have tried everything, but it still will not work. Here's the link to the info for it if you're not familiar: http://kenwheeler.github.io/slick/

I copied exactly what the website said to do and looked everywhere at what other people did and tried their code as well, but nothing works. Everytime it's just a series of pictures in a single column on the page. No slider at all. Hope someone knows what could be going wrong. Thanks!

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <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=".multiple-items">
    <div><img src="http://placehold.it/1000x400&text=[ img 1 ]"/></div>
    <div><img src="http://placehold.it/1000x400&text=[ img 1 ]"/></div>
    <div><img src="http://placehold.it/1000x400&text=[ img 1 ]"/></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(){
      
      $('.multiple-items').slick({
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 3
      });
    });
  </script>

  </body>
</html>

Upvotes: 2

Views: 88

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115282

Change <div class=".multiple-items"> to <div class="multiple-items">. There is no need of . while setting class attribute.In your code when initializing slick $('.multiple-items') will not select any elements due to that typo.

<div class="multiple-items">
<!--     --^-- remove `.` from here   -->
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]"/></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]"/></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]"/></div>
</div>

Upvotes: 1

Related Questions