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