93 lines
3.1 KiB
JavaScript
93 lines
3.1 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-slider-container').each(function() {
|
|
const container = $(this);
|
|
const slider = container.find('.product-image-slider');
|
|
const items = slider.find('.slider-item');
|
|
let currentIndex = 0;
|
|
|
|
// Hide all except first
|
|
items.css({ position: 'absolute', opacity: 0, transition: 'opacity 0.3s ease' });
|
|
items.eq(currentIndex).css({ opacity: 1, position: 'relative' });
|
|
|
|
// Create and insert dots
|
|
const dotsContainer = $('<div class="slider-dots"></div>');
|
|
items.each(function(i) {
|
|
const dot = $('<span class="slider-dot"></span>');
|
|
if (i === 0) dot.addClass('active');
|
|
dot.on('click', function() {
|
|
currentIndex = i;
|
|
updateSlide();
|
|
});
|
|
dotsContainer.append(dot);
|
|
});
|
|
container.append(dotsContainer);
|
|
|
|
// Slide update function
|
|
function updateSlide() {
|
|
items.css({ opacity: 0, position: 'absolute' });
|
|
items.eq(currentIndex).css({ opacity: 1, position: 'relative' });
|
|
dotsContainer.find('.slider-dot').removeClass('active')
|
|
.eq(currentIndex).addClass('active');
|
|
}
|
|
|
|
// Touch swipe
|
|
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;
|
|
const delta = touchEndX - touchStartX;
|
|
|
|
if (Math.abs(delta) > 50) {
|
|
if (delta < 0) {
|
|
currentIndex = (currentIndex + 1) % items.length;
|
|
} else {
|
|
currentIndex = (currentIndex - 1 + items.length) % items.length;
|
|
}
|
|
updateSlide();
|
|
}
|
|
});
|
|
|
|
// Optional: support prev/next buttons too
|
|
container.find('.slider-prev').on('click', function() {
|
|
currentIndex = (currentIndex - 1 + items.length) % items.length;
|
|
updateSlide();
|
|
});
|
|
|
|
container.find('.slider-next').on('click', function() {
|
|
currentIndex = (currentIndex + 1) % items.length;
|
|
updateSlide();
|
|
});
|
|
});
|
|
});
|
|
|