CODEWITHSUNDEEP
javascriptslick.js
Aldrin Espinosa
Aldrin Espinosa

Reputation: 41

Slick slider not working properly

I've used slick slider before, but now I don't what causes this ruckus. Am I missing something? I've followed the instruction at slick slider and also at github, I'm puzzled.

//JS here
$('.slider').slick({
  arrows:true,
  autoplaySpeed:1000
});
/* Style here */
.container{
   max-width:1200px;
   margin:0 auto;
 }
<!-- Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<!-- Html -->
<div class="container">
 <div class="slider">

   <div class="slides">
    <img src="Picture4" alt="">
   </div>

   <div class="slides">
    <img src="Picture3" alt="">
   </div>

   <div class="slides">
    <img src="Picture2" alt="">
   </div>

   <div class="slides">
    <img src="Picture1" alt="">
   </div>
 </div>
</div>

Upvotes: 2

Views: 9008

Answers (1)

martinho
martinho

Reputation: 1016

After analyzing your code, I noticed that the slick css import was missing.

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css

I leave your example below with the CSS import.

$('.slider').slick({
  arrows:true,
  autoplaySpeed:1000
});
.container{
  max-width:1200px;
  margin:0 auto;
}
.slider{
  display:flex;
  .slides{
    display:flex;
    justify-content:center;
  }
}
<!-- this line is missing -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="container">
  <div class="slider">
    
  <div class="slides">
    <img src="http://via.placeholder.com/500x500" alt="">
  </div>
  <div class="slides">
    <img src="http://via.placeholder.com/500x500" alt="">
  </div>
  <div class="slides">
    <img src="http://via.placeholder.com/500x500" alt="">
  </div>
  <div class="slides">
    <img src="http://via.placeholder.com/500x500" alt="">
  </div>
</div>
</div>

Upvotes: 1

Related Questions