jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick-theme.css">


<div class="slick-slider">    
    <div class="slick-slide" data-product-id="1" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image1.png">Orthopädisches Sitzkissen</div>
    <div class="slick-slide" data-product-id="2" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image2.png">Hämorrhoiden Kissen</div>
    <div class="slick-slide" data-product-id="3" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image3.png">Rückenkissen</div>
    <div class="slick-slide" data-product-id="4" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image4.png">Comfort Cushion</div>
    <div class="slick-slide" data-product-id="5" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image5.png">All-in-one</div>
    <div class="slick-slide" data-product-id="6" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image6.png">Aufstehkissen</div>
    <div class="slick-slide" data-product-id="7" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image7.png">Wedge Cushion</div>
    
    <div class="slick-slide" data-product-id="1" data-product-cat="2"><img src="https://www.solodev.com/assets/carousel/image1.png">Nackenkissen blau</div>
    <div class="slick-slide" data-product-id="2" data-product-cat="2"><img src="https://www.solodev.com/assets/carousel/image2.png">Travelers</div>
    
    <div class="slick-slide" data-product-id="2" data-product-cat="3"><img src="https://www.solodev.com/assets/carousel/image2.png">Kniekissen</div>
    
    <div class="slick-slide" data-product-id="3" data-product-cat="4"><img src="https://www.solodev.com/assets/carousel/image3.png">Dreamy</div>
  ...

CSS

.slick-slide {
    /* height: 250px; */
    text-align: center;
    color: #000;
    padding: 10px;
    margin: 0 10px;
}


.slick-slide:nth-child(even) {
    background-color: #cccccc;
}

.slick-slide:nth-child(odd) {
    background-color: #aaaaaa;
}


.slick-prev {
    left: 5px;
    z-index: 1000;
}

.slick-next {
    right: 5px;
    z-index: 1000;
}


.slick-slide img {
    margin: auto;
    cursor: pointer;
}

.slick-slide:hover {
    -moz-box-shadow:inset 0px 0px 0px 3px #4297aa;
    box-shadow:inset 0px 0px 0px 3px #4297aa;
}

.slick-list {
    outline: none !important;
}

.slick-slide:focus { outline: none; }

JavaScript

$(document).ready(function() {

  $('.slick-slider').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,

    
  });
});