Untitled

 avatar
unknown
plain_text
a year ago
1.7 kB
5
Indexable
// Hämtar referens till bild-elementet
const imageElement = document.querySelector('.post-image img');

// En array med bildkällor
const imageSources = [
  'images/image1.jpg',
  'images/image2.jpg',
  'images/image3.jpg',
  'images/image4.jpg',
  'images/image5.jpg',
];

let currentImageIndex = 0; // Index för den aktuella bilden

// Hämtar referenser till pilarna
const arrowLeft = document.getElementById('arrow-left');
const arrowRight = document.getElementById('arrow-right');

// Lägger till en händelselyssnare för hover-effekt på pilarna
arrowLeft.addEventListener('mouseover', function() {
    arrowLeft.style.cursor = 'pointer';
    arrowLeft.style.borderRightColor = 'pink';
});

arrowLeft.addEventListener('mouseout', function() {
    arrowLeft.style.borderRightColor = 'palevioletred';
});

arrowRight.addEventListener('mouseover', function() {
    arrowRight.style.cursor = 'pointer';
    arrowRight.style.borderLeftColor = 'pink';
});

arrowRight.addEventListener('mouseout', function() {
    arrowRight.style.borderLeftColor = 'palevioletred';
});

// Lägger till en händelselyssnare för vänsterpilen
arrowLeft.addEventListener('click', function () {
    currentImageIndex = (currentImageIndex - 1 + imageSources.length) % imageSources.length;
    updateImage();
});

// Lägger till en händelselyssnare för högerpilen
arrowRight.addEventListener('click', function () {
    currentImageIndex = (currentImageIndex + 1) % imageSources.length;
    updateImage();
});

// Funktion för att uppdatera bildkällan
function updateImage() {
    const newImageSource = imageSources[currentImageIndex];
    imageElement.src = newImageSource;
}
Editor is loading...
Leave a Comment