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.

<!-- Slick Slider CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick-theme.css">
 
<!-- jQuery and Slick JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.js"></script>

Step 2: Create the Slider Markup

<div class="brand_list_slider">
    <div><img src="https://via.placeholder.com/300x200?text=1"></div>
    <div><img src="https://via.placeholder.com/300x200?text=2"></div>
    <div><img src="https://via.placeholder.com/300x200?text=3"></div>
    <div><img src="https://via.placeholder.com/300x200?text=4"></div>
    <div><img src="https://via.placeholder.com/300x200?text=5"></div>
    <div><img src="https://via.placeholder.com/300x200?text=6"></div>
    <div><img src="https://via.placeholder.com/300x200?text=7"></div>
    <div><img src="https://via.placeholder.com/300x200?text=8"></div>
</div> 

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!

See Coding | Learn More | Let's Improve our Coding Knowledge

Pages