jQuery addClass example

Change class name on click in jQuery

by wisegorilla

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="product_select_wrap">
  <form name="product_select" id="product_select_form" action="contact-info/" method="post">
    <select name="product_type" id="product_type">
      <option value="" hidden selected>Produktkategorie auswählen</option>
      <option value="450">Bandage</option>
      <option value="1">Kissen</option>
    </select>

    <select name="cushion_type" id="cushion_type" hidden>
      <option value=""  hidden selected>Kissenkategorie auswählen</option>
      <option value="1">Sitz - & Rückenkissen</option>
      <option value="2">Nackenkissen</option>
      <option value="3">Kniekissen</option>
      <option value="4">Schlafkissen</option>
    </select>
    <input type="text" id="product_id" name="Product-ID" style="display:none;">
		<input type="text" value="" id="marketplace" name="Marketplace" style="display:none;">
    <input id="submit_btn" type="submit" value="Weiter" hidden>
  </form>
</div>



<div class="slick-slider">
  <div class="slick-slide" data-product-id="30" data-product-cat="1"><img src="/wp-content/uploads/2020/02/orthopädisches_sitzkissem.png">Orthopädisches Sitzkissen Normal</div>
  <div class="slick-slide" data-product-id="36" data-product-cat="1"><img src="/wp-content/uploads/2020/02/orthopädisches_sitzkissem.png">Orthopädisches Sitzkissen Large</div>
  <div class="slick-slide" data-product-id="25" data-product-cat="1"><img src="/wp-content/uploads/2020/02/hämorrhoiden_kissen.png">Hämorrhoiden Kissen Normal</div>
  <div class="slick-slide" data-product-id="21" data-product-cat="1"><img src="/wp-content/uploads/2020/02/hämorrhoiden_kissen.png">Hämorrhoiden Kissen Large</div>
  <div class="slick-slide"...

CSS

#product_select_wrap select, #product_select_wrap input {
    width: 100%;
}

#product_select_wrap {
    width: 40%;
    margin: auto;
}

@media only screen and (max-width: 767px) {
    #product_select_wrap {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #product_select_wrap {
        width: 60%;
    }
}


/* Slick Styling */
.slick-slide {
    text-align: center;
    background: #eee;
    font-size: 16px;
    color: #6BAAD9;
    font-weight: 600;
    padding: 10px;
    margin: 0 10px;
    border-radius: 5px;
}

.slick-slide {

}

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

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

.slick-slide img {
	margin: auto;
	cursor: pointer;
	margin-bottom: 5px;
    border-radius: 5px;
}

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

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

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

.slick-next:before,
.slick-prev:before {
	color: #ccc !important;
}

JavaScript

(function($) {
  	var $product_type = $('#product_type'),
  			$cushion_type = $('#cushion_type'),
  			$submit_btn = $('#submit_btn'),
  			$slick_slider = $('.slick-slider'),
  			$slick_slide = $('.slick-slide'),
  			slick_filtered = false;
  
    $product_type.on('change', function() {
      $cushion_type.prop('selectedIndex', 0);
      if ($product_type.get(0).selectedIndex == 1) {
        $slick_slider.slideUp();
        $cushion_type.fadeOut();
        $submit_btn.fadeIn();
        $product_id = $(this).val();
        $('#product_id').val($product_id);
      } else if ($product_type.get(0).selectedIndex > 1) {
        $cushion_type.fadeIn();
        $submit_btn.fadeOut();
      }
    });
  
    $cushion_type.on('change', function() {
      $slick_slider.fadeIn();
      $submit_btn.fadeOut();
      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() {
      $submit_btn.hide();
      $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.on('mousedown',...