107 lines
3.8 KiB
JavaScript
107 lines
3.8 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
// Shopper Perks Carousel
|
|
const perks = document.querySelectorAll(".perk-item");
|
|
let currentIndexPerks = 0;
|
|
|
|
function showNextPerk() {
|
|
// Hide all perks
|
|
perks.forEach(perk => {
|
|
perk.classList.remove("visible"); // Hide by removing 'visible' class
|
|
perk.style.display = "none"; // Set display to none
|
|
});
|
|
|
|
// Show the current perk
|
|
perks[currentIndexPerks].classList.add("visible"); // Show current perk by adding 'visible' class
|
|
perks[currentIndexPerks].style.display = "block"; // Explicitly set display to block
|
|
|
|
console.log(`Showing perk ${currentIndexPerks}`); // Debugging line
|
|
|
|
// Move to the next perk, loop back to the start if at the end
|
|
currentIndexPerks = (currentIndexPerks + 1) % perks.length;
|
|
}
|
|
|
|
// Show the first perk initially
|
|
showNextPerk();
|
|
|
|
// Set an interval to cycle through the perks every 2.25 seconds (2250ms)
|
|
setInterval(showNextPerk, 2250);
|
|
|
|
// Customer Highlights Carousel
|
|
const testimonials = document.querySelectorAll(".testimonial");
|
|
let currentIndexTestimonials = 0;
|
|
|
|
console.log("Testimonials found: ", testimonials.length); // Debugging line
|
|
|
|
function showNextTestimonial() {
|
|
// Hide all testimonials
|
|
testimonials.forEach(testimonial => {
|
|
testimonial.classList.remove("visible"); // Remove 'visible' class
|
|
testimonial.style.display = "none"; // Set display to none
|
|
});
|
|
|
|
// Show the current testimonial
|
|
testimonials[currentIndexTestimonials].classList.add("visible"); // Add 'visible' class to show current testimonial
|
|
testimonials[currentIndexTestimonials].style.display = "block"; // Explicitly set display to block
|
|
|
|
console.log(`Showing testimonial ${currentIndexTestimonials}`); // Debugging line
|
|
|
|
// Move to the next testimonial, loop back to the start if at the end
|
|
currentIndexTestimonials = (currentIndexTestimonials + 1) % testimonials.length;
|
|
}
|
|
|
|
// Show the first testimonial initially
|
|
showNextTestimonial();
|
|
|
|
// Set an interval to cycle through the testimonials every 3.5 seconds (3500ms)
|
|
setInterval(showNextTestimonial, 3500);
|
|
|
|
// Featured Items Carousel
|
|
const featuredItems = document.querySelectorAll("#featured-images .featured-item");
|
|
let currentIndex = 0;
|
|
|
|
function showNextItem() {
|
|
// Remove the 'active' class from the current image
|
|
featuredItems[currentIndex].classList.remove("active");
|
|
|
|
// Move to the next index, looping back to the start if necessary
|
|
currentIndex = (currentIndex + 1) % featuredItems.length;
|
|
|
|
// Add the 'active' class to the next image
|
|
featuredItems[currentIndex].classList.add("active");
|
|
}
|
|
|
|
// Initially show the first image by adding 'active' class
|
|
featuredItems[currentIndex].classList.add("active");
|
|
|
|
// Cycle through images every 3 seconds
|
|
setInterval(showNextItem, 3000);
|
|
});
|
|
|
|
// Featured Items Carousel
|
|
const featuredItems = document.querySelectorAll("#featured-images .featured-item");
|
|
let currentIndexFeatured = 0;
|
|
|
|
function updateFeaturedImages() {
|
|
featuredItems.forEach((item, index) => {
|
|
// Hide the text inside each <a> tag by setting the text's display to 'none'
|
|
const text = item.closest('a');
|
|
if (text) text.style.display = (index === currentIndexFeatured ? "block" : "none");
|
|
|
|
// Show only the active image by setting display to block for the current image
|
|
const image = item;
|
|
image.style.display = (index === currentIndexFeatured ? "block" : "none");
|
|
});
|
|
}
|
|
|
|
// Show next featured image
|
|
function showNextFeatured() {
|
|
currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length; // Loop to the start
|
|
updateFeaturedImages();
|
|
}
|
|
|
|
// Initialize featured items carousel by showing the first image
|
|
updateFeaturedImages();
|
|
|
|
// Set up automatic cycling every 3 seconds
|
|
setInterval(showNextFeatured, 3000);
|