image-carousel

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <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>

    <div class="carousel">

      <div class="image-container" id="imgs">

        <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 class="buttons-container">

        <button id="left" class="btn">Prev</button>

        <button id="right" class="btn">Next</button>

      </div>

    </div>


    <script>const imgs = document.getElementById('imgs')

      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>