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">
<form name="product_select" id="product_select_form" action="conctact-details/" method="post">
<select name="product_type" id="product_type" class="product_select">
  <option value="" disabled selected>Produktkategorie auswählen</option>
  <option value="1" data-option-id="1">Bandage</option>
  <option value="2" data-option-id="2">Kissen</option>
</select>


<select name="cushion_type" id="cushion_type" class="product_select" disabled>
  <option value="" disabled selected>Kissenkategorie auswählen</option>
  <option value="1" data-option-id="1">Sitz - & Rückenkissen</option>
  <option value="2" data-option-id="2">Nackenkissen</option>
  <option value="3" data-option-id="3">Kniekissen</option>
  <option value="4" data-option-id="4">Schlafkissen</option>
</select>
<input type="text" id="product_id" name="product_id">

<input class="product_select_submit" id="submit_btn" type="submit" value="Weiter" disabled>
</form>

<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...

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

var $product_type = $('#product_type'),
  $cushion_type = $('#cushion_type'),
  $submit_btn = $('#submit_btn'),
  slick_filtered = false;

$product_type.on('change', function() {
  $cushion_type.prop('selectedIndex', 0);
  if ($product_type.get(0).selectedIndex == 1) {
    $('.slick-slider').hide();
    $cushion_type.prop("disabled", true);
    $submit_btn.prop("disabled", false);
  } else if ($product_type.get(0).selectedIndex > 1) {
    $cushion_type.prop("disabled", false);
  }
});

$cushion_type.on('change', function() {
  $('.slick-slider').show();
  cushion_type_id = $cushion_type.find(':selected').val();
  if (slick_filtered === false) {
    $('.slick-slider').slick('slickFilter', '[data-product-cat="' + cushion_type_id + '"]');
    slick_filtered = true;
  } else {
    $('.slick-slider').slick('slickUnfilter');
    $('.slick-slider').slick('slickFilter', '[data-product-cat="' + cushion_type_id + '"]');
  }
});

$(document).ready(function() {
  $('.slick-slider').hide();
  $('.slick-slider').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3
        }
      },
      {
        breakpoint: 800,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 500,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
});



$(".slick-slide").click(function() {
  $product_id = $(this).data('product-id');
  $('#product_id').val($product_id);
  $('#product_select_form').submit();

});