DEV Community

Cover image for Create Image Slider With Navigation Buttons Using HTML, CSS & JS
Monalisha Mondol
Monalisha Mondol

Posted on

13 8

Create Image Slider With Navigation Buttons Using HTML, CSS & JS

Today in this blog I'll share the image slider effect using HTML, CSS & javascript.
I'm sure that you have seen the Image Slideshow Effect on many websites. A slide show is a presentation of a series of still images on a projection screen or electronic display device, typically in a prearranged sequence.


In the video, you have seen the image slider effect and I hope you've understood the basic codes behind creating this slider.

HTML Code:



    <div class="slider-ctr">
        <figure class="slide"><img src="dori.jpg" alt="Sky"/>
          <figcaption> 
            <div class="title">Doraemon</div>
            <div class="author">Doraemon and Nobita</div>
          </figcaption>
        </figure>



        <figure class="slide"><img src="vim.jpg" alt="Sky"/>
          <figcaption> 
            <div class="title">Bheem</div>
            <div class="author">Chota Bheem</div>
          </figcaption>
        </figure>



        <figure class="slide"><img src="oggy.jpg" alt="River"/>
          <figcaption> 
            <div class="title">Oggy</div>
            <div class="author">Oggy and the Cockroaches</div>
          </figcaption>
        </figure>


        <figure class="slide"><img src="tom.jpg" alt="Rain"/>
          <figcaption>
            <div class="title">Tom</div>
            <div class="author">Tom and Jerry</div>
          </figcaption>
        </figure>


        <figure class="slide text-on"><img src="jan-book.jpg" alt="Ocean"/>
          <figcaption>
            <div class="title">Mowgli</div>
            <div class="author">The Jangal Book</div>
          </figcaption>
        </figure>


        <div class="slider-control">
          <div class="control prev disabled">
            <div class="fa fa-chevron-left"></div>
          </div>

          <div class="control next">
            <div class="fa fa-chevron-right"></div>
          </div>
        </div>
      </div>
Enter fullscreen mode Exit fullscreen mode

CSS Code:


html,
body {
  height: 100%;
  width: 100%;
  position: relative;
  font-family: Roboto;
  background: #868686;
}

.slider-ctr {
  width: 485px;
  height: 280px;
  position: absolute;
  top: 50%;

  left: 50%;
  margin-top: -130px;
  margin-left: -222px;
  box-sizing: border-box;
  border: 10px solid white;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 10px 15px 3px rgba(0, 0, 0, 0.15), 0 5px 20px 3px rgba(0, 0, 0, 0.1);
}
.slider-ctr:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.6) 100%);
  background: -webkit-linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 9;
}

.slider-control {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: 60px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.15);
  z-index: 99;
}
.slider-control .control {
  width: 50%;
  height: 30px;
  display: block;
  float: left;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  transition: 0.3s all ease;
  background: white;
}
.slider-control .control .icon {
  pointer-events: none;
  transition: 0.3s all ease;
}
.slider-control .control.disabled {
  pointer-events: none;
  background: #ddd;
}
.slider-control .control.disabled .icon {
  opacity: 0.5;
}

.slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0px;
  margin: 0px;
  transition: 0.45s all cubic-bezier(0.65, 0.05, 0.36, 1);
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.slide:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.125);
}
.slide.slide-on {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
.slide.text-on .title {
  transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.45s;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.slide.text-on .author {
  transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.6s;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.slide img {
  display: block;
  width: 100%;

}
.slide figcaption {
  position: absolute;
  top: 10px;
  left: 20px;
}
.slide .title {
  font-size: 20px;
  margin-bottom: 2px;
  color: rgb(255, 253, 253);
  transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.45s;
  -webkit-clip-path: inset(0 0 0 100%);
  clip-path: inset(0 0 0 100%);
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  position: relative;
} 

.slide .author{
  color: white;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript Code:

// buttons

      var sliderControl = document.querySelector(".slider-control");

      // slides informations

      var slides = document.querySelectorAll(".slide"),
          slidesLength = slides.length;

      // slides array

      var slidesArr = [].slice.call(slides);

      // reverse array sorting

      slidesArr = slidesArr.reverse();


      // slide current
      var slideCurrent = 0;

      sliderControl.addEventListener("click", function(e){
        target = e.target;

        // Get next button
        if(target.classList.contains("next")){
          next = e.target,
          prev = next.previousElementSibling,
          nextSlide = slidesArr[slideCurrent + 1],
          slide = slidesArr[slideCurrent];

          slide.classList.add("slide-on");
          slide.classList.remove("text-on");
          nextSlide.classList.add("text-on");

          slideCurrent += 1;        
          if(slideCurrent > 0) {
            prev.classList.remove("disabled");
          }         
          if(slideCurrent === slidesLength - 1){
            next.classList.add("disabled");
          }
     }     

     // get prev button
         if(target.classList.contains("prev")){

          slideCurrent -= 1;

          prev = e.target,
          next = prev.nextElementSibling,
          prevSlide = slidesArr[slideCurrent + 1],
          slidesArr[slideCurrent];
          prevSlide.classList.remove("text-on");
          slide.classList.remove("slide-on");
          slide.classList.add("text-on");

          if(slideCurrent === slidesLength - 2){
            next.classList.add("disabled");
          }
          if(slideCurrent === 0){
          prev.classList.add("disabled");}

         }        
 });

Enter fullscreen mode Exit fullscreen mode

Watch the video tutorial: Click Here {YouTube}

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (3)

Collapse
 
mafee6 profile image
Mafee7

wow

Collapse
 
kernix13 profile image
Jim Kernicky

Very nice - thanks!

Collapse
 
0xldev profile image
0xLDev

good for you

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay