javascript slick_carousel_image_out_block.js

Posted 2021-05-03

function slickSlider() {

      // Involve Slider
      $('.slick-for').slick({
         slidesToShow: 1,
         slidesToScroll: 1,
         arrows: false,
         // fade: true,
         asNavFor: '.slick-nav',
         speed: 700,
         infinite: false,
      });
      $('.slick-nav').slick({
         infinite: false,
         speed: 0,
         slidesToShow: 1,
         slidesToScroll: 1,
         asNavFor: '.slick-for',
         swipe: false,
      });


      // Slide Count
      let slickSlider      = $(".slick-nav"),
          slickSliderCount = $(".slick-count"),
          slickSliderCountSpan = $(".slick-count span"),
          slickSlideTotal  = $('.slick-item').length / 2; // if have slider-nav and slider-for
          // slickSlideTotal  = $('.slick-item').length;

      slickSliderCountSpan.text(slickSlideTotal);

      slickSlider.on("init", function(event, slick){
         slickSliderCount.text(parseInt(slick.currentSlide + 1) + ' / ' + slick.slideCount);
      });

      slickSlider.on("afterChange", function(event, slick, currentSlide){
         slickSliderCount.text(parseInt(slick.currentSlide + 1) + ' / ' + slick.slideCount);
      });
   } slickSlider();