CODEWITHSUNDEEP
cssslick.js
darkchampionz
darkchampionz

Reputation: 1234

CSS - I can't get a simple Slick Carousel to work

<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>
  <style>
    .d1 {
      background-color: lightblue;
      display: flex;
    }
    a {
      background-color: yellow;
      display: block;
      margin: 0 10px;
      width: 200px;
      height: 200px;
    }
  </style>
  <body>

  <div class="d1">
    <div><a href="https://kenwheeler.github.io/slick/">1</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">2</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">3</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">4</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">5</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">6</a></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>

I am trying to display 6 <a>'s in a row with 3 to be shown at a time. I use the above code copied and pasted directly from their tutorial site (https://kenwheeler.github.io/slick/) and I replace the container (class d1) as well as the child elements but the result does not function or move at all, not even the left and right buttons appear... The folder contains only this .html file.

enter image description here

Upvotes: 1

Views: 896

Answers (3)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

Two things I changed to fix this:

  1. Add the slick initialisation class "multiple-items"; this tells Slick what container to affect
  2. Link to slick css, theme css and javascript repos on cdn; make sure you are linking to those properly in your project (not the cdn versions I'd say)

Your code, updated, now works:

.d1 .slick-prev,
.d1 .slick-next {
width: 50px;
height: 50px;
z-index: 9999;
opacity: 1;
}

.d1 .slick-prev {
left: 25px;
}

.d1 .slick-next {
right: 25px;
}
<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
  </head>
  <style>
    .d1 {
      background-color: lightblue;
      display: flex;
    }
    a {
      background-color: yellow;
      display: block;
      margin: 0 10px;
      width: 200px;
      height: 200px;
    }
  </style>
  <body>

  <div class="multiple-items d1">
    <div><a href="https://kenwheeler.github.io/slick/">1</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">2</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">3</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">4</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">5</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">6</a></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="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.multiple-items').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3, 
        arrows: true
      });
    });
  </script>

  </body>
</html>

Upvotes: 2

Allisona
Allisona

Reputation: 169

Need to replace .multiple-items with d1 which is your class name in your jQuery. Also make sure, your cdn or path to the file directory is correct. Any console error?

Upvotes: 0

Creative Div
Creative Div

Reputation: 443

You are initializing a class "d1" for slick. But on scripts you are targeting the wrong class. Please update your script with the following

$(document).ready(function(){
      // Your class "multiple-items" will replace with "d1"
      $('.d1').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
    });

Upvotes: 2

Related Questions