JSFiddle - React, Tailwind, and code Playground

by Burduja Serghei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<div class="slider slider-for">
    <div class="item"><h3>1</h3></div>
    <div class="item"><h3>2</h3></div>
    <div class="item"><h3>3</h3></div>
    <div class="item"><h3>4</h3></div>
    <div class="item"><h3>5</h3></div>
<div class="item"><h3>6</h3></div>
<div class="item"><h3>7</h3></div>
</div>
<div class="slider slider-nav">
    <div class="item"><h3>1</h3></div>
    <div class="item"><h3>2</h3></div>
    <div class="item"><h3>3</h3></div>
    <div class="item"><h3>4</h3></div>
    <div class="item"><h3>5</h3></div>
<div class="item"><h3>6</h3></div>
<div class="item"><h3>7</h3></div>
</div>

CSS

.slider .item {
    background-color: red;
    margin: 0 15px;
}

JavaScript

$('.slider-for').slick({
	slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
	slidesToShow: 5,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    focusOnSelect: true,
    centerMode: true,
    centerPadding: 0
});

function setSlideVisibility() {
  //Find the visible slides i.e. where aria-hidden="false"
  var visibleSlides = $('.slider-nav > .slick-list > .slick-track > .slick-slide[aria-hidden="false"]');
  //Make sure all of the visible slides have an opacity of 1
  $(visibleSlides).each(function() {
    $(this).css('opacity', 1);
    console.log($(this).html());
  });
  //Set the opacity of the first and last partial slides.
  $(visibleSlides).first().prev().css('opacity', 0);
  $(visibleSlides).last().next().css('opacity', 0);
}

//Execute the function to apply the visibility on dom ready.
$(setSlideVisibility());

//Re-apply the visibility in the beforeChange event.
$('.slider-nav').on('beforeChange', function() {
  $('.slick-slide').each(function() {
  	$(this).css('opacity', 1);
  });
});

//After the slide change has completed, call the setSlideVisibility to hide the partial slides.
$('.slider-nav').on('afterChange', function() {
  setSlideVisibility();
});