97 lines
3 KiB
JavaScript
97 lines
3 KiB
JavaScript
//jQuery(document).ready(function ($) {
|
|
// $('.product-image-slider').each(function () {
|
|
// let slider = $(this);
|
|
// let items = slider.find('.slider-item');
|
|
// let currentIndex = 0;
|
|
//
|
|
// function showSlide(index) {
|
|
// items.removeClass('active');
|
|
// $(items[index]).addClass('active');
|
|
// }
|
|
//
|
|
// slider.siblings('.slider-prev').click(function () {
|
|
// currentIndex = (currentIndex > 0) ? currentIndex - 1 : items.length - 1;
|
|
// showSlide(currentIndex);
|
|
// });
|
|
//
|
|
// slider.siblings('.slider-next').click(function () {
|
|
// currentIndex = (currentIndex < items.length - 1) ? currentIndex + 1 : 0;
|
|
// showSlide(currentIndex);
|
|
// });
|
|
//
|
|
// // Initialize
|
|
// showSlide(currentIndex);
|
|
// });
|
|
//});
|
|
//
|
|
jQuery(document).ready(function($) {
|
|
$('.product-image-slider').each(function() {
|
|
let slider = $(this);
|
|
let items = slider.find('.slider-item');
|
|
let currentIndex = 0;
|
|
|
|
// Add dots container
|
|
let dotsContainer = $('<div class="slider-dots"></div>');
|
|
slider.after(dotsContainer);
|
|
|
|
items.each(function(i) {
|
|
let dot = $('<span class="slider-dot"></span>');
|
|
if (i === 0) dot.addClass('active');
|
|
dot.on('click', function() {
|
|
currentIndex = i;
|
|
showSlide(currentIndex);
|
|
});
|
|
dotsContainer.append(dot);
|
|
});
|
|
|
|
function updateDots(index) {
|
|
dotsContainer.find('.slider-dot').removeClass('active')
|
|
.eq(index).addClass('active');
|
|
}
|
|
|
|
function showSlide(index) {
|
|
items.removeClass('active');
|
|
$(items[index]).addClass('active');
|
|
updateDots(index);
|
|
}
|
|
|
|
slider.siblings('.slider-prev').click(function() {
|
|
currentIndex = (currentIndex > 0) ? currentIndex - 1 : items.length - 1;
|
|
showSlide(currentIndex);
|
|
});
|
|
|
|
slider.siblings('.slider-next').click(function() {
|
|
currentIndex = (currentIndex < items.length - 1) ? currentIndex + 1 : 0;
|
|
showSlide(currentIndex);
|
|
});
|
|
|
|
// Swipe support for mobile
|
|
let touchStartX = 0;
|
|
let touchEndX = 0;
|
|
|
|
slider.on('touchstart', function(e) {
|
|
touchStartX = e.originalEvent.touches[0].clientX;
|
|
});
|
|
|
|
slider.on('touchend', function(e) {
|
|
touchEndX = e.originalEvent.changedTouches[0].clientX;
|
|
handleSwipe();
|
|
});
|
|
|
|
function handleSwipe() {
|
|
let deltaX = touchEndX - touchStartX;
|
|
if (Math.abs(deltaX) > 50) {
|
|
if (deltaX < 0) {
|
|
currentIndex = (currentIndex + 1) % items.length;
|
|
} else {
|
|
currentIndex = (currentIndex - 1 + items.length) % items.length;
|
|
}
|
|
showSlide(currentIndex);
|
|
}
|
|
}
|
|
|
|
// Init
|
|
showSlide(currentIndex);
|
|
});
|
|
});
|
|
|