image-carousel

<!DOCTYPE html>

<head>

<style>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {

box-sizing: border-box;

}

body {

font-family: 'Roboto', sans-serif;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

margin: 0;

}

img {

width: 500px;

height: 500px;

object-fit: cover;

}

.carousel {

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

height: 530px;

width: 500px;

overflow: hidden;

}

.image-container {

display: flex;

transform: translateX(0);

transition: transform 0.5s ease-in-out;

}

.buttons-container {

display: flex;

justify-content: space-between;

}

.btn {

background-color: rebeccapurple;

color: #fff;

border: none;

padding: 0.5rem;

cursor: pointer;

width: 49.5%;

}

.btn:hover {

opacity: 0.9;

}

.btn:focus {

outline: none;

}

</style>

<title>Image Carousel</title>

</head>

<body>

<img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80"

alt="first-image"

/>

<img

src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"

alt="second-image"

/>

<img

src="https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"

alt="third-image"

/>

<img

src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80"

alt="fourth-image"

/>

</div>

</div>

const leftBtn = document.getElementById('left')

const rightBtn = document.getElementById('right')

const img = document.querySelectorAll('#imgs img')

let idx = 0

let interval = setInterval(run, 2000)

function run() {

idx++

changeImage()

}

function changeImage() {

if(idx > img.length - 1) {

idx = 0

} else if(idx < 0) {

idx = img.length - 1

}

imgs.style.transform = `translateX(${-idx * 500}px)`

}

function resetInterval() {

clearInterval(interval)

interval = setInterval(run, 2000)

}

rightBtn.addEventListener('click', () => {

idx++

changeImage()

resetInterval()

})

leftBtn.addEventListener('click', () => {

idx--

changeImage()

resetInterval()

})

</script>

</body>

</html>