I am facing an issue where the dots in my slider keep adding up and forming multiple lines when there are more than 30-40 images. I aim to achieve a dot navigation similar to Instagram, where clicking on a dot displays the corresponding image with the active dot sliding into the middle.
Although slick-slider allows for selecting slidesToScroll to group the images (instead of scrolling one by one), this does not effectively address the problem on mobile devices.
Since jQuery is not included in the project, I am looking for JavaScript or JSX solutions to implement this functionality.
I want something like what is shown in this example:
https://codepen.io/nazarkomar/pen/RdRjqJ
$(document).ready(function() {
var slider = $('.main-slider');
slider.slick({
dots: true
});
function loadSliderDotClasses(stickSlider) {
var dot = stickSlider.find('.slick-dots li.slick-active'),
dotSize1 = 'dot-size-1',
dotSize2 = 'dot-size-2',
dotSize3 = 'dot-size-3';
stickSlider.find('.slick-dots li').each(function() {
$(this).removeClass(dotSize1).removeClass(dotSize2).removeClass(dotSize3);
});
dot.prev().prev().prev().addClass(dotSize1);
dot.prev().prev().addClass(dotSize2);
dot.prev().addClass(dotSize3);
dot.next().addClass(dotSize3);
dot.next().next().addClass(dotSize2);
dot.next().next().next().addClass(dotSize1);
}
loadSliderDotClasses(slider);
slider.find('.slick-dots li').on('click', function() {
loadSliderDotClasses(slider);
});
slider.on('swipe', function(event, slick, direction){
loadSliderDotClasses(slider);
});
});
https://codepen.io/nazarkomar/pen/RdRjqJ
Is it possible to convert this to JavaScript?