document.addEventListener("DOMContentLoaded", function () {
function initAllProductSliders() {
const slideBoxes =
document.querySelectorAll("#slide");
if (!slideBoxes.length) return;
slideBoxes.forEach(function (slideBox) {
/* Prevent duplicate initialization */
if (
slideBox.dataset.sliderReady === "yes"
) {
return;
}
const slider =
slideBox.querySelector(
"ul.products"
);
if (!slider) return;
const originalProducts =
Array.from(
slider.querySelectorAll(
":scope > li.product"
)
);
if (originalProducts.length < 3) {
return;
}
slideBox.dataset.sliderReady =
"yes";
/* ======================================
SETTINGS
====================================== */
let visibleItems =
window.innerWidth <= 767
? 2
: 5;
let currentIndex =
visibleItems;
let step = 0;
let autoplayTimer = null;
let isAnimating = false;
/* ======================================
DRAG
====================================== */
let dragging = false;
let dragStartX = 0;
let dragCurrentX = 0;
let dragOffset = 0;
let hasDragged = false;
let blockClick = false;
/* ======================================
BASIC STYLE
====================================== */
slider.style.display =
"flex";
slider.style.flexWrap =
"nowrap";
slider.style.margin =
"0";
slider.style.padding =
"0";
slider.style.gap =
"0";
slider.style.transition =
"none";
slider.style.cursor =
"grab";
slider.style.userSelect =
"none";
slider.style.webkitUserSelect =
"none";
slider.style.touchAction =
"pan-y";
slideBox.style.position =
"relative";
slideBox.style.width =
"100%";
slideBox.style.maxWidth =
"100%";
slideBox.style.overflow =
"hidden";
slideBox.style.boxSizing =
"border-box";
slideBox.style.paddingBottom =
"35px";
/* ======================================
REMOVE OLD CLONES
====================================== */
slider
.querySelectorAll(
".home-slider-clone"
)
.forEach(function (clone) {
clone.remove();
});
/* ======================================
CLONES BEFORE
====================================== */
for (
let i =
originalProducts.length -
visibleItems;
i <
originalProducts.length;
i++
) {
const clone =
originalProducts[i]
.cloneNode(true);
clone.classList.add(
"home-slider-clone"
);
slider.insertBefore(
clone,
slider.firstChild
);
}
/* ======================================
CLONES AFTER
====================================== */
originalProducts
.slice(
0,
visibleItems
)
.forEach(function (product) {
const clone =
product.cloneNode(true);
clone.classList.add(
"home-slider-clone"
);
slider.appendChild(
clone
);
});
/* ======================================
CALCULATE SIZE
====================================== */
function calculateSizes() {
visibleItems =
window.innerWidth <= 767
? 2
: 5;
const containerWidth =
slideBox.clientWidth;
const gap =
window.innerWidth li.product"
)
);
allProducts.forEach(
function (
product,
index
) {
product.style.flex =
"0 0 " +
cardWidth +
"px";
product.style.width =
cardWidth +
"px";
product.style.maxWidth =
cardWidth +
"px";
product.style.marginLeft =
"0";
product.style.marginRight =
gap +
"px";
product.style.boxSizing =
"border-box";
if (
index ===
allProducts.length - 1
) {
product.style.marginRight =
"0";
}
}
);
slider.style.width =
(
allProducts.length *
cardWidth
) +
(
(
allProducts.length - 1
) *
gap
) +
"px";
return (
cardWidth +
gap
);
}
step =
calculateSizes();
/* ======================================
POSITION
====================================== */
function setPosition(
index,
animate
) {
slider.style.transition =
animate
? "transform 0.35s ease-out"
: "none";
slider.style.transform =
"translate3d(-" +
(
index *
step
) +
"px,0,0)";
}
setPosition(
currentIndex,
false
);
/* ======================================
PAGINATION
====================================== */
const controls =
document.createElement(
"div"
);
controls.className =
"home-slider-controls";
controls.innerHTML =
'';
slideBox.appendChild(
controls
);
const pagination =
controls.querySelector(
".home-slider-pagination"
);
originalProducts.forEach(
function (
product,
index
) {
const dot =
document.createElement(
"button"
);
dot.type =
"button";
dot.className =
"home-slider-page";
dot.setAttribute(
"aria-label",
"Slide " +
(index + 1)
);
dot.addEventListener(
"click",
function () {
currentIndex =
visibleItems +
index;
setPosition(
currentIndex,
true
);
updatePagination();
restartAutoplay();
}
);
pagination.appendChild(
dot
);
}
);
const dots =
Array.from(
pagination.querySelectorAll(
".home-slider-page"
)
);
function updatePagination() {
let active =
currentIndex -
visibleItems;
if (
active =
originalProducts.length
) {
active = 0;
}
dots.forEach(
function (
dot,
index
) {
dot.classList.toggle(
"active",
index === active
);
}
);
}
updatePagination();
/* ======================================
NEXT SLIDE
====================================== */
function nextSlide() {
if (
isAnimating ||
dragging
) {
return;
}
isAnimating = true;
currentIndex++;
setPosition(
currentIndex,
true
);
setTimeout(
function () {
if (
currentIndex >=
originalProducts.length +
visibleItems
) {
currentIndex =
visibleItems;
setPosition(
currentIndex,
false
);
}
isAnimating =
false;
updatePagination();
},
380
);
}
/* ======================================
DESKTOP MOUSE DOWN
====================================== */
slider.addEventListener(
"mousedown",
function (event) {
if (
event.button !== 0
) {
return;
}
if (
isAnimating
) {
return;
}
dragging = true;
hasDragged = false;
blockClick = false;
dragStartX =
event.clientX;
dragCurrentX =
event.clientX;
dragOffset = 0;
clearInterval(
autoplayTimer
);
slider.style.transition =
"none";
slider.style.cursor =
"grabbing";
event.preventDefault();
}
);
/* ======================================
DESKTOP MOUSE MOVE
====================================== */
document.addEventListener(
"mousemove",
function (event) {
if (!dragging)
return;
dragCurrentX =
event.clientX;
dragOffset =
dragCurrentX -
dragStartX;
if (
Math.abs(
dragOffset
) > 5
) {
hasDragged =
true;
blockClick =
true;
}
if (
!hasDragged
) {
return;
}
const position =
(
currentIndex *
step
) -
dragOffset;
slider.style.transform =
"translate3d(-" +
position +
"px,0,0)";
event.preventDefault();
}
);
/* ======================================
DESKTOP MOUSE UP
====================================== */
document.addEventListener(
"mouseup",
function () {
if (!dragging)
return;
dragging = false;
slider.style.cursor =
"grab";
const movement =
dragOffset /
step;
if (
hasDragged
) {
if (
movement
0.18
) {
currentIndex--;
}
}
setPosition(
currentIndex,
true
);
setTimeout(
function () {
if (
currentIndex >=
originalProducts.length +
visibleItems
) {
currentIndex =
visibleItems;
setPosition(
currentIndex,
false
);
}
if (
currentIndex 5
) {
hasDragged =
true;
blockClick =
true;
}
if (
!hasDragged
) {
return;
}
const position =
(
currentIndex *
step
) -
dragOffset;
slider.style.transform =
"translate3d(-" +
position +
"px,0,0)";
},
{
passive: true
}
);
/* ======================================
MOBILE TOUCH END
====================================== */
slider.addEventListener(
"touchend",
function () {
if (!dragging)
return;
dragging = false;
const movement =
dragOffset /
step;
if (
hasDragged
) {
if (
movement
0.18
) {
currentIndex--;
}
}
setPosition(
currentIndex,
true
);
setTimeout(
function () {
if (
currentIndex >=
originalProducts.length +
visibleItems
) {
currentIndex =
visibleItems;
setPosition(
currentIndex,
false
);
}
if (
currentIndex <
visibleItems
) {
currentIndex =
originalProducts.length +
visibleItems -
1;
setPosition(
currentIndex,
false
);
}
updatePagination();
restartAutoplay();
setTimeout(
function () {
blockClick =
false;
hasDragged =
false;
},
50
);
},
380
);
dragOffset = 0;
},
{
passive: true
}
);
/* ======================================
BLOCK CLICK AFTER DRAG
====================================== */
slider.addEventListener(
"click",
function (event) {
if (
blockClick
) {
event.preventDefault();
event.stopPropagation();
return false;
}
},
true
);
/* ======================================
PREVENT IMAGE DRAG
====================================== */
slider
.querySelectorAll("img")
.forEach(
function (image) {
image.setAttribute(
"draggable",
"false"
);
image.addEventListener(
"dragstart",
function (event) {
event.preventDefault();
}
);
}
);
/* ======================================
AUTOPLAY
====================================== */
function startAutoplay() {
clearInterval(
autoplayTimer
);
autoplayTimer =
setInterval(
function () {
if (
!dragging &&
!isAnimating
) {
nextSlide();
}
},
4000
);
}
function restartAutoplay() {
clearInterval(
autoplayTimer
);
startAutoplay();
}
startAutoplay();
/* ======================================
RESIZE
====================================== */
let resizeTimer;
window.addEventListener(
"resize",
function () {
clearTimeout(
resizeTimer
);
resizeTimer =
setTimeout(
function () {
if (
dragging
) {
return;
}
step =
calculateSizes();
currentIndex =
visibleItems;
setPosition(
currentIndex,
false
);
updatePagination();
},
250
);
}
);
});
}
/*
* Elementor/WooCommerce may need
* extra time to render shortcodes.
*/
setTimeout(
initAllProductSliders,
1000
);
setTimeout(
initAllProductSliders,
2500
);
});