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.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<div class="slider">   <div class="slide">     <h2>Slide 1</h2>     <div class="controls">       <button class="prev">←</button>       <button class="next">→</button>       <div class="dots"></div>     </div>   </div>   <div class="slide">     <h2>Slide 2</h2>     <div class="controls">       <button class="prev">←</button>       <button class="next">→</button>       <div class="dots"></div>     </div>   </div>   <div class="slide">     <h2>Slide 3</h2>     <div class="controls">       <button class="prev">←</button>       <button class="next">→</button>       <div class="dots"></div>     </div>   </div> </div>

2. Initialize Slick

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

$(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 = $(`<button class="custom-dot" data-slide="${i}">${i + 1}</button>`);       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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

.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.