JSFiddle - React, Tailwind, and code Playground

by Dhruvang Gajjar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="nav_main_block">
  <div class="block"><a class="scroll-nav" href="#benefits_sec" id="Key click - Nav Btn - Benefits">Benefits</a></div>
  <div class="block"><a class="scroll-nav" href="#testimonial_sec" id="Key click - Nav Btn - Testimonials">Testimonials</a></div>
  <div class="block"><a class="scroll-nav" href="#standout_sec" id="Key click - Nav Btn - Stand out">Stand out</a></div>
  <div class="block"><a class="scroll-nav" href="#reach_sec" id="Key click - Nav Btn - REACH">REACH</a></div>
  <div class="block"><a class="scroll-nav" href="#edm_sec_banner" id="Key click - Nav Btn - Reviews">Reviews</a></div>
  <div class="block"><a class="scroll-nav" href="#news_sec" id="Key click - Nav Btn - News">News</a></div>
</div>
</div>

JavaScript

$('.nav_main_block').slick({

  slidesToShow: 3,
  dots: false,
  centerMode: true,
  infinite: true,
  arrows: false,
  responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 4

      }
    },
    {
      breakpoint: 481,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3


      }
    },
    {
      breakpoint: 375,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3

      }
    }

  ]
});


$('.nav_main_block').on('click', '.slick-slide', function (e) {
  e.stopPropagation();
  var index = $(this).data("slick-index");
  if ($('.nav_main_block.slick-slider').slick('slickCurrentSlide') !== index) {
    $('.nav_main_block.slick-slider').slick('slickGoTo', index);
  }
});