Image Carousel

Florin Pop’s mini project no. 10

Next auto (coming soon)

What’s interesting

1. Florin used an image container inside the carousel and then used transform: translateX on that single element moving all the images together as a block, rather than each image like I did before.
2. Using images.length to count the number of images and use that to determine the amount in translateX(distance)

ToDo’s

1. Make responsive
2. inside a modal?
3. Add an image button which creates a new image element with the url.
4. auto play / stop
5. Use alt tag to display a title.

Previous attempt on JS Fiddle.

const imgCont = document.getElementById('imgContainer');
const nextBtn = document.getElementById('nextBtn');
const images = document.querySelectorAll('#imgContainer img');

nextBtn.addEventListener('click', () => {
    changeImg();
})

let i = 1;

function changeImg() {

    if (i >= images.length) {
        i = 0;
    }
    let distance = 600 * -i;
        imgCont.style.transform = `translateX(${distance}px)`;
        i++;
    
        console.log('i = ' + i + ' distance = ' + distance);
}