How to Limit Navigation Dots in Slick Slider Using jQuery

Slick Slider is a popular jQuery plugin for creating responsive carousels. However, when working with large numbers of slides, the default dot navigation can become overwhelming. In this tutorial, we will learn how to limit the number of visible dots in Slick Slider using jQuery.

Why Limit Navigation Dots?

By default, Slick Slider generates one dot for each slide. If your slider has 20+ slides, it results in a cluttered navigation UI. Limiting the dots to a fixed number (e.g., 6 dots at a time) ensures a clean and user-friendly interface.

Implementing Slick Slider with Limited Dots

Step 1: Include Required Files

First, make sure to include jQuery and Slick Slider in your project.

Step 2: Create the Slider Markup

Step 3: Initialize Slick Slider and Limit Dots

 
jQuery(document).ready(function($) {
    var maxDots = 6; // Limit the visible dots to 6

    $('.brand_list_slider').slick({
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        centerMode: true,
        centerPadding: '80px',
    });

    $('.brand_list_slider').on('init', function(event, slick) {
        setTimeout(function() { limitDots($('.brand_list_slider'), maxDots, slick); }, 100);
    });

    $('.brand_list_slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
        limitDots($('.brand_list_slider'), maxDots, slick, nextSlide);
    });

    function limitDots(slider, maxDots, slick, currentIndex = 0) {
        var dots = slider.find('.slick-dots li');
        var totalDots = dots.length;

        if (totalDots > maxDots) {
            dots.hide(); // Hide all dots

            var start = Math.max(0, Math.min(totalDots - maxDots, currentIndex - Math.floor(maxDots / 2)));
            var end = start + maxDots;

            dots.slice(start, end).show(); // Show only a limited set of dots
        }
    }
});

Step 4: Custom CSS for Dot Navigation

 
.slick-dots {
    display: flex !important;
    justify-content: center;
    overflow: hidden;
}
.slick-dots li {
    display: none; /* Hide all dots initially */
}
.slick-dots li button {
    font-size: 14px;
}

How It Works

• Slick Slider Initialization – We initialize the slider with navigation dots enabled.
• limitDots()** Function** – It hides all dots initially and then displays only 6 at a time.
• Event Handling – The function runs on init and beforeChange to update the dots dynamically as the slides change.

Conclusion

By implementing this approach, you can enhance the usability and appearance of Slick Slider’s navigation. This method is especially useful for sliders with many slides, keeping the navigation clean and intuitive.

Try it out in your next project and let us know your thoughts in the comments!

Include navigation (arrows) and pagination (dots) on each slide itself in a slick slider

If you want to include navigation (arrows) and pagination (dots) on each slide itself in a slick slider, here's how you can achieve this:

1. HTML Structure

You need to place arrows and dots inside each slide so that they appear uniquely for each one.

  

    
Slide 1
    

      
      
      

    
  
  

    
Slide 2
    

      
      
      

    
  
  

    
Slide 3
    

      
      
      

    
  

2. Initialize Slick

Use Slick’s API to manage navigation and pagination for each slide:

$(document).ready(function () {
  $('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: true,
    speed: 500,
    arrows: false, // Disable global arrows
    dots: false, // Disable global dots
  });

  // Add custom controls for each slide
  $('.slider .slide').each(function (index, slide) {
    const $prevButton = $(slide).find('.prev');
    const $nextButton = $(slide).find('.next');

    // Go to the previous slide on click
    $prevButton.on('click', function () {
      $('.slider').slick('slickPrev');
    });

    // Go to the next slide on click
    $nextButton.on('click', function () {
      $('.slider').slick('slickNext');
    });

    // Generate custom dots for this slide
    const $dotsContainer = $(slide).find('.dots');
    const slideCount = $('.slider .slide').length;

    for (let i = 0; i < slideCount; i++) {
      const dot = $(``);
      dot.on('click', function () {
        $('.slider').slick('slickGoTo', $(this).data('slide'));
      });
      $dotsContainer.append(dot);
    }
  });

  // Sync active dots with slick events
  $('.slider').on('afterChange', function (event, slick, currentSlide) {
    $('.custom-dot').removeClass('active');
    $(`.custom-dot[data-slide="${currentSlide}"]`).addClass('active');
  });
});

3. CSS Styling

Make it visually appealing with CSS:

.slider {
  position: relative;
}

.slide {
  text-align: center;
  position: relative;
}

.controls {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.controls .prev,
.controls .next {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.controls .prev:hover,
.controls .next:hover {
  background-color: #0056b3;
}

.controls .dots {
  display: flex;
  gap: 5px;
}

.controls .custom-dot {
  background-color: #ddd;
  border: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
}

.controls .custom-dot.active {
  background-color: #007bff;
}

4. Final Outcome

• Each slide now has its own arrows and pagination dots.
• Clicking on these controls interacts seamlessly with the slick slider.
• Dots update dynamically to reflect the current active slide.