JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.css">
<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">
<ul class="carousel">
  <li><img src="https://picsum.photos/1024/768?1" alt="1"></li>
  <li><img src="https://picsum.photos/1024/768?2" alt="2"></li>
  <li><img src="https://picsum.photos/1024/768?3" alt="3"></li>
  <li><img src="https://picsum.photos/1024/768?4" alt="4"></li>
  <li><img src="https://picsum.photos/1024/768?5" alt="5"></li>
  <li><img src="https://picsum.photos/1024/768?6" alt="6"></li>
  <li><img src="https://picsum.photos/1024/768?7" alt="7"></li>
  <li><img src="https://picsum.photos/1024/768?8" alt="8"></li>
  <li><img src="https://picsum.photos/1024/768?9" alt="9"></li>
  <li><img src="https://picsum.photos/1024/768?10" alt="10"></li>
  <li><img src="https://picsum.photos/1024/768?11" alt="11"></li>
  <li><img src="https://picsum.photos/1024/768?12" alt="12"></li>
</ul>
<div class="carousel-slider"></div>

CSS

.slick-slider {
  max-width: 800px;
}

.slick-slide img {
  max-width: 100%;
  display: block;
  height: auto;
}

JavaScript

(function($) {
	$(function() {
      $('.carousel').on('init reInit', function(e, el) {
      	var slider = $('.carousel-slider').get(0);
      	noUiSlider.create(slider, {
          start: 0,
          range: {
            min: 0,
            max: el.$slides.length - 3
          },
          step: 1
        });
        slider.noUiSlider.on('change', function (values, handle, unencoded, tap, positions, noUiSlider) {
          if (window.debounce) clearTimeout(window.debounce);
          window.debounce = setTimeout(function() {
          	if (window.changedBy !== 'slick') {
              window.changedBy = 'slider';
              unencoded = Math.round(unencoded[0]);
        			console.log('change: ' + window.changedBy + ': ' + unencoded);
              $('.carousel').slick('slickGoTo', unencoded);
              window.changedBy = '';
            }
          }, 150);
        });
      });
  		$('.carousel').slick({
      	arrows: false,
        dots: false,
        infinite: false,
        slidesToShow: 3.5
      });
      $('.carousel').on('beforeChange', function(e, _, __, idx) {
      	if (window.changedBy !== 'slider') {
          window.changedBy = 'slick';
        	console.log('beforeChange: ' + window.changedBy + ': ' + idx);
          $('.carousel-slider').get(0).noUiSlider.set(idx);
          window.changedBy = '';
        }
      });
  });
})(jQuery);