Add Thumbnail To Carousel

Add class name: wtr-slider_thumbnail style1

Code CSS:

<style>

/* ---- slider thumbnail --- */

.wtr-slider_thumbnail.style1 {

  --sizedot: 70px;

}

.wtr-slider_thumbnail.style1 .brz-slick-slider__dots {

  width: 100%!important;

}

.wtr-slider_thumbnail.style1 .brz-slick-slider__dots {

  overflow-X: scroll;

  overflow-Y: hidden;

}

.wtr-slider_thumbnail.style1 .brz-slick-slider__dots::-webkit-scrollbar {

  display: none;

}

.wtr-slider_thumbnail.style1 ul {

  margin: 0 -5px!important;

}

.wtr-slider_thumbnail.style1 ul li {

  flex-shrink: 0;

}

.wtr-slider_thumbnail.style1:not[data-sortable-element="true"] ul li button {

  display: none;

}

.wtr-slider_thumbnail.style1 li img {

  width: var(--sizedot);

  height: var(--sizedot);

  object-fit: cover;

  cursor: pointer;

}

.wtr-slider_thumbnail.style1:not[data-sortable-element="true"] ul li:not(.slick-active)::before {

  content: "";

  width: var(--sizedot);

  height: var(--sizedot);

  position: absolute;

  background: black;

  opacity: 0.3;

  cursor: pointer;

}

.wtr-slider_thumbnail.style1 .brz-slick-slider__arrow {

  top: calc(50% - var(--sizedot)/2)!important;

}

</style>

Code Javascript:

<script>

var eventList = ["DOMContentLoaded", "resize"];

for (event of eventList) {

window.addEventListener(event, function() {

var wtr_slider_thumbnail_ids = document.querySelectorAll(".wtr-slider_thumbnail");

for (let i = 0; i < wtr_slider_thumbnail_ids.length; i++) {

wtr_slider_thumbnail_ids[i].classList.add("wtr-slider_thumbnail-" + i);

let slider_thumbnail_id = document.getElementsByClassName("wtr-slider_thumbnail-" + i)[0],

wtr_slide_thumbnail_items = slider_thumbnail_id.querySelectorAll(".slick-slide:not(.slick-cloned)");

var wtr_thumbnail_dots = slider_thumbnail_id.querySelectorAll("ul>li");

for (let j = 0; j < wtr_slide_thumbnail_items.length; j++) {

while (wtr_thumbnail_dots[j].firstChild) {

wtr_thumbnail_dots[j].firstChild.remove();

}

let wtr_slide_thumbnail_img = wtr_slide_thumbnail_items[j].querySelector(".brz-img");

let wtr_thumbnail_dot_img = document.createElement("img");

wtr_thumbnail_dot_img.srcset = wtr_slide_thumbnail_img.srcset;

wtr_thumbnail_dots[j].appendChild(wtr_thumbnail_dot_img);

if (slider_thumbnail_id.querySelectorAll(".brz-slick-slider__dots > li").length * 80 > slider_thumbnail_id.querySelector("ul.brz-slick-slider__dots").offsetWidth) {

slider_thumbnail_id.querySelector("ul.brz-slick-slider__dots").style.display = "inline-flex";

} else {

slider_thumbnail_id.querySelector("ul.brz-slick-slider__dots").style.display = "block";

}

}

//click and drag scroll

const slider = slider_thumbnail_id.querySelector('ul.brz-slick-slider__dots');

let isDown = false;

let startX;

let scrollLeft;

slider.addEventListener('mousedown', (e) => {

isDown = true;

slider.classList.add('active');

                // scroll ngang

startX = e.pageX - slider.offsetLeft;

scrollLeft = slider.scrollLeft;

});

slider.addEventListener('mouseleave', () => {

isDown = false;

slider.classList.remove('active');

});

slider.addEventListener('mouseup', () => {

isDown = false;

slider.classList.remove('active');

});

slider.addEventListener('mousemove', (e) => {

if (!isDown) return;

e.preventDefault();

                // scroll ngang

const x = e.pageX - slider.offsetLeft;

const walk = (x - startX) * 2; //scroll-fast

slider.scrollLeft = scrollLeft - walk;

});

}

});

}

</script>