Horizontal Image Slider using HTML, CSS & JavaScript

Horizontal Image Slider using HTML, CSS & JavaScript

Hello developers, today in this blog, you'll learn to create a Horizontal Image Slider using HTML, CSS & JavaScript.

Image slider or slideshow commonly shows one large image. The images get manually forward and backward, allowing you to click on the forward and backward buttons.

In this blog (Horizontal Image Slider), there are four images but only a single image will appear at the front. There are two buttons at the right bottom of the image which works manually by clicking on either side of the buttons. These buttons slide these images forward and backward one by one on a button click. By clicking on the button you can forward or backward the images as you want. This forward and backward function is performed by using JavaScript.

The source code of this Horizontal Image Slider is given below, if you want the source code of this program, you can copy it. You can use this Horizontal Image Slider with your creativity and can take this project to the next level.

Horizontal Image Slider [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Horizontal Image Slider || Learningrobo</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"> </head> <body> <div class="slider-ctr"> <figure class="slide"><img src="https://cdn.pixabay.com/photo/2013/02/03/15/15/building-77610__340.jpg"> <figcaption> <div class="title">Sky</div> <div class="author">Lorem ipsum dolor...</div> </figcaption> </figure> <figure class="slide"><img src="https://cdn.pixabay.com/photo/2013/04/11/19/46/building-102840__340.jpg"> <figcaption> <div class="title">River</div> <div class="author">Lorem ipsum dolor...</div> </figcaption> </figure> <figure class="slide"><img src="https://cdn.pixabay.com/photo/2021/08/30/21/29/port-6587129__340.jpg"> <figcaption> <div class="title">Rain</div> <div class="author">Lorem ipsum dolor...</div> </figcaption> </figure> <figure class="slide"><img src="https://cdn.pixabay.com/photo/2018/01/21/01/46/architecture-3095716__340.jpg"> <figcaption> <div class="title">Ocean</div> <div class="author">Lorem ipsum dolor...</div> </figcaption> </figure> <div class="slider-control"> <div class="control prev disabled"> <i class="fas fa-chevron-left"></i> </div> <div class="control next"> <i class="fas fa-chevron-right"></i> </div> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To form the page attractive create a CSS file with the name style.css and remember that you've got to make a file with a .css extension.


@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

html,
body {
  height: 100%;
  position: relative;
  font-family: Roboto;
  background-color: #000;
  overflow: hidden;
}
.slider-ctr {
  width: 700px;
  height: 450px;
  margin-top: -220px;
  margin-left: -350px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  border: 10px solid white;
  border-radius: 5px;
  overflow: hidden;
}

.slider-control {
   position: absolute;
   bottom: 30px;
   right: 30px;
   width: 80px;
   overflow: hidden;
   border-radius: 3px;
   box-shadow: 0 3px 3px 3px rgba(0,0,0,.15);
   z-index: 99;
  }
  .control {
   width: 50%;
   height: 40px;
   display: block;
   float: left;
   text-align: center;
   line-height: 40px;
   cursor: pointer;
   transition: .3s all ease;
   background: #fff;
  }
  .control i {
    pointer-events: none;
    transition: .3s all ease;
  }
  .control.disabled{
    pointer-events: none;
    background: #fff;
  }
  .control.disabled i{
    opacity: .5;
  }
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: .45s all cubic-bezier(0.65, 0.05, 0.36, 1);
    clip-path: inset(0 0 0 0);
  }
  .slide:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.125);
  }
  .slide.slide-on {
    clip-path: inset(0 100% 0 0);
  }
  .slide.text-on .title {
    transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .45s;
    clip-path: inset(0 0 0 0);
  }
  .slide.text-on .author {
    transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .6s;
    clip-path: inset(0 0 0 0);
  }
  .slide img{
      display: block;
      height: 400px;
  }
  .slide   figcaption {
    position: absolute;
    top: 30px;
    left: 30px;
  }
  .slide .title {
    font-size: 50px;
    margin-bottom: 2px;
    color: #fff;
    transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .45s;
    clip-path: inset(0 0 0 100%);
    font-weight: 400;
    letter-spacing: 10px;
    text-transform: uppercase;
    position: relative;
  }
  .slide .author {
    font-size: 16px;
    color: #fff;
    opacity: .8;
    transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .45s;
    clip-path: inset(0 0 0 100%);
    font-weight: 300;
    letter-spacing: 3px;
    position: relative;
    z-index: 9;
  }
  .credit a{
     text-decoration: none;
     color: #000;
     font-weight: 800;
     color: #fff;
}
.credit {
    position: fixed;
    bottom:20px;
    left:40%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 10px;
    color: #fff;
}
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


var sliderControl = document.querySelector(".slider-control");
var slides = document.querySelectorAll(".slide"),
    slidesLength = slides.length;
var slidesArr = [].slice.call(slides);
slidesArr = slidesArr.reverse();
var slideCurrent = 0;
sliderControl.addEventListener("click", function(e){
  target = e.target;
  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");
    }
  }
  
  if(target.classList.contains("prev")){
    
    slideCurrent -= 1;
    
    prev = e.target,
    next = prev.nextElementSibling,
    prevSlide = slidesArr[slideCurrent + 1],
    slide = slidesArr[slideCurrent];
    
    prevSlide.classList.remove("text-on");
    slide.classList.remove("slide-on");
    slide.classList.add("text-on");
    
    if(slideCurrent === slidesLength - 2){
      next.classList.remove("disabled");
    }

    if(slideCurrent === 0){
      prev.classList.add("disabled");
    }
    
  }

});

balapaCop("Image Slider", "#999");
We hope you would like this Horizontal Image Slider using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this Horizontal Image Slider using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome
OnlineEditor
HTMLTools