Image Slider
Tags: javascript, beginners, tutorial
Published: 2022-05-08 05:08:50

**THE HTML part**
```  
 <body>
        <h1>The Image Slider</h1>
     <div class="slider">
<div class="slides">
        <img src="https://images.pexels.com/photos/355321/pexels-photo-355321.jpeg?cs=srgb&dl=pexels-pixabay-355321.jpg&fm=jpg" alt="Photo 1" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/1546166/pexels-photo-1546166.jpeg?cs=srgb&dl=pexels-david-mcbee-1546166.jpg&fm=jpg" alt="Photo 2" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/853199/pexels-photo-853199.jpeg?cs=srgb&dl=pexels-artem-beliaikin-853199.jpg&fm=jpg" alt="Photo 3" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?cs=srgb&dl=pexels-pixabay-33545.jpg&fm=jpg" alt="Photo 4" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg?cs=srgb&dl=pexels-eberhard-grossgasteiger-443446.jpg&fm=jpg" alt="Photo 5" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/1287460/pexels-photo-1287460.jpeg?cs=srgb&dl=pexels-asad-photo-maldives-1287460.jpg&fm=jpg" alt="Photo 6" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/1643389/pexels-photo-1643389.jpeg?cs=srgb&dl=pexels-vecislavas-popa-1643389.jpg&fm=jpg" alt="Photo 7" />
</div>
  

      <button class="btn btn__left">&larr;</button>
      <button class="btn btn__right">&rarr;</button>
      <div class="dots"></div>
    </div>
</body> 
```
**The css part**

```
   * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        background-color: rgb(122, 184, 255);
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
          sans-serif;
        background: url(https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?cs=srgb&dl=pexels-moose-photos-1037992.jpg&fm=jpg);
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;
      }
      h1 {
        text-align: center;
      }
      .slider {
        position: relative;
        max-width: 80%;
        height: 35vmax;
box-shadow: 5px 10px 20px 10px grey;
        margin: 20px auto;
        overflow: hidden;
        top: 0;
      }
      .slides {
        display: flex;
        justify-content: center;
        align-items: center;
        
        position: absolute;
        transition: transform 1.3s ease;
      }
      .slides > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .btn {
        width: 60px;
        height: 60px;
        z-index: 10;
        position: absolute;
        text-align: center;
        background-color: transparent;
        border: none;
        font-size: 3em;
        font-weight: 1000;
        cursor: pointer;
        color: rgb(253, 139, 139);
      }
      .btn__left {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 6%;
        top: 45%;
      }
      .btn__right {
        position: absolute;
        transform: translate(50%, -50%);
        right: 6%;
        top: 45%;
      }
      .btn:hover {
        color: lightblue;
      }
      .dots {
        position: absolute;
        left: 40%;
        bottom: 5%;
        display: flex;
      }
      .dot {
        width: 0.9vmax;
        height: 0.9vmax;
        border-radius: 50%;
        border: none;
        margin-right: 5px;
        transition: all 0.7s ease;
        top: 80%;
        background-color: lightblue;
        margin-right: 1.5rem;
      }
      .dot__active {
        background-color: rgb(253, 139, 139);
      }
      @media only screen and (max-width: 689px) {
        .slider {
          width: 100%;
          height: 35%;
        }
        .dots {
          left: 25%;
        }
        .btn {
          font-size: 1.8rem;
        }
      }
      @media only screen and (max-width: 400px) {
        h1 {
          font-size: 1.7rem;
        }
        .slider {
          width: 100%;
          height: 20%;
        }
        .dots {
          left: 13%;
        }
      } ;
```
**The js part**

```
 const slider = document.querySelector(".slider");
      const slides = document.querySelectorAll(".slides");
      const btnLeft = document.querySelector(".btn__left");
      const btnRight = document.querySelector(".btn__right");
      const dotContainer = document.querySelector(".dots");
      let curSlide = 0;
      let maxSlide = slides.length - 1;
       
      const createNewdots = function () {
        slides.forEach((_, i) => {
          dotContainer.insertAdjacentHTML(
            "beforeend",
            `<button class="dot" data-slide="${i}"></button>`
          );
        });
      };
      // moving logic
      const slideMover = function (curSlide) {
        slides.forEach((s, i) => {
          s.style.transform = `translate(${100 * (i - curSlide)}%)`;
        });
      };
       // Active dot logic
      const dotActive = function (curr) {
        document.querySelectorAll(".dot").forEach((s, i) => {
          s.classList.remove("dot__active");
        });
        document
          .querySelector(`.dot[data-slide="${curr}"]`)
          .classList.add("dot__active");
        curSlide = curr;
      };
  // sliding forward
      const nextSlide = function () {
        if (curSlide == maxSlide) {
          curSlide = 0;
        } else {
          curSlide++;
        }
        slideMover(curSlide);
        dotActive(curSlide);
      };
// sliding backward
      const prevSlide = function () {
        if (curSlide == 0) {
          curSlide = maxSlide;
        } else {
          curSlide--;
        }
        slideMover(curSlide);
        dotActive(curSlide);
        clearInterval(automatic);
      };

      const initializer = function () {
        slideMover(0);
        createNewdots();
        dotActive(0);
      };
      initializer();

      btnRight.addEventListener("click", nextSlide);
      btnRight.addEventListener("click", function () {
        clearInterval(automatic);
      });
      btnLeft.addEventListener("click", prevSlide);
      dotContainer.addEventListener("click", function (e) {
        if (e.target.classList.contains("dot")) {
          const clicked = e.target.dataset.slide;

          slideMover(clicked);
          dotActive(clicked);
          clearInterval(automatic);
        }
      });
document .addEventListener("keydown",function(e){
  console.log(e.key)
  if(e.key==="ArrowRight"){
    
    nextSlide()
         clearInterval(automatic);
  }
  if (e.key==="ArrowLeft"){
    prevSlide()
         clearInterval(automatic);
    
  }
})
// automatic sliding effect
      const automatic = setInterval(() => {
        nextSlide();
      }, 2000);
```
**html**
1. creating div having class "slider"
2. inside slider div another div called slides each slides have the images
3. creating buttons Left and Right
4. creating div called dot

**CSS**
1. giving height,width and overflow hidden, position to slider div

2.giving display flex,absolute to slide div

3.using media query made it to responsive

**JS**
1.using transform:translateX() we make the slide to move
2.implementing forward and backward sliding moment logics
3.creating dot buttons inside Dots container
4.giving dot button logics