jQuery toggleClass example

Toggle class name on click in jQuery

by petarvasilev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<div id="slides">
  <div id="slide-1" class="piece"></div>
  <div id="slide-2" class="piece"></div>
  <div id="slide-3" class="piece"></div>
</div>

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

.piece {
  width: 50px;
  height: 100px;
  background: green;
}

#slide-1  {
  background: blue;
}
#slide-2 {
  background: yellow;
}
#slide-3 {
  background: pink;
}
#slide-4 {
  background: deeppink;
}
#slide-5 {
  background: skyblue;
}
#slide-6 {
  background: grey;
}

JavaScript

var slickOptions = {
        slidesToShow: 3,
        slidesToScroll: 3,
        rows: 2,
        dots: true,
        arrows: false,
        dotsClass: 'slick-dots slick-dots-black',
        adaptiveHeight: true,
    };
$('#slides').slick(slickOptions);