Home

jQuery(document).ready(function($) { const slider = $('.slider-container'); function activate(e) { const items = $('.slider-item'); if ($(e.target).hasClass('slider-next')) { const firstItem = items.first(); // Remove the show class to prepare for animation firstItem.removeClass('show'); // Move the first item to the end slider.append(firstItem); // Trigger reflow for animation void firstItem.offsetWidth; // Forces a reflow // Add class for animation with stagger items.each(function(index) { const item = $(this); setTimeout(() => { item.removeClass('show'); // Reset before adding show void item.offsetWidth; // Forces a reflow item.addClass('show'); // Add class for animation }, index * 100); // Staggered effect }); } if ($(e.target).hasClass('slider-prev')) { const lastItem = items.last(); // Remove the show class to prepare for animation lastItem.removeClass('show'); // Move the last item to the front slider.prepend(lastItem); // Trigger reflow for animation void lastItem.offsetWidth; // Forces a reflow // Add class for animation with stagger items.each(function(index) { const item = $(this); setTimeout(() => { item.removeClass('show'); // Reset before adding show void item.offsetWidth; // Forces a reflow item.addClass('show'); // Add class for animation }, index * 100); // Staggered effect }); } } // Initial setup: add show class to the first item $('.slider-item').first().addClass('show'); $(document).on('click', activate); });