Assignment3_work_with_sliders/scripts.js

49 lines
1.5 KiB
JavaScript

var copy = document.querySelector(".logos-slide").cloneNode(true);
document.querySelector(".logos").appendChild(copy);
// Get all images, descriptions, pagination buttons
const images = document.querySelectorAll(".swiper-slide");
const descriptions = document.querySelectorAll(".project-description");
const paginationButtons = document.querySelectorAll(".pagination-button");
let currentIndex = 0; // Start with the first slide
// Function to update the displayed content based on the current index
function updateContent(index) {
// Hide all descriptions
descriptions.forEach((desc) => {
desc.classList.remove("active");
});
// Show the current description
const selectedDescription = document.getElementById(`description-${index}`);
if (selectedDescription) {
selectedDescription.classList.add("active");
}
// Update pagination active class
paginationButtons.forEach((button) => {
button.classList.remove("active");
});
paginationButtons[index].classList.add("active");
}
// Event listeners for image clicks
images.forEach((image, index) => {
image.addEventListener("click", () => {
currentIndex = index;
updateContent(currentIndex);
});
});
// Event listeners for pagination buttons
paginationButtons.forEach((button, index) => {
button.addEventListener("click", () => {
currentIndex = index;
updateContent(currentIndex);
});
});
// Initialize the content (first image and description are visible)
updateContent(currentIndex);