JSFiddle - React, Tailwind, and code Playground

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 class="product_select_wrap">
  <form name="product_select" id="product_select_form" action="contact-submit/" method="post">
    <select name="product_type" id="product_type" class="product_select marketplace_list gift_form_dropdown">
      <option value="" disabled selected>Produktkategorie auswählen</option>
      <option value="45">Bandage</option>
      <option value="1">Kissen</option>
    </select>

    <select name="cushion_type" id="cushion_type" class="product_select marketplace_list gift_form_dropdown" hidden>
      <option value="" disabled 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 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="https://bonmedico.de/wp-content/uploads/2020/01/orthop__disches_sitzkissem.png">Orthopädisches Sitzkissen Normal</div>
  <div class="slick-slide" data-product-id="36" data-product-cat="1"><img src="https://bonmedico.de/wp-content/uploads/2020/01/orthop__disches_sitzkissem.png">Orthopädisches Sitzkissen Large</div>
  <div class="slick-slide" data-product-id="25" data-product-cat="1"><img src="https://bonmedico.de/wp-content/uploads/2020/01/h__morrhoiden_kissen.png">Hämorrhoiden Kissen Normal</div>
  <div class="slick-slide" data-product-id="21" data-product-cat="1"><img...

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', function(evt) {
    $slick_slide.on('mouseup mousemove', function handler(evt) {
      if (evt.type === 'mouseup') {
        $product_id =...