Responsive Image Slider using HTML, CSS & JavaScript

Responsive Image Slider using HTML, CSS & JavaScript

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

Image slider or slideshow commonly shows one large image at a time with a little scrap of text, at the bottom of the image.

 

In this blog Responsive Image Slider, there are three images but only a single image will appear at the front. There are buttons on the left and right side 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.

 

There are three rounded buttons at the bottom of the image, which allows you to click on whichever image you picked or you want. This forward, backward, and onclick function is performed by using JavaScript. The CSS media query property has been used to make the web page responsive. 


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

 

Responsive 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> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="https://cdn.pixabay.com/photo/2020/05/15/14/03/lake-5173683__340.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="https://cdn.pixabay.com/photo/2021/07/12/19/43/swans-6421355__340.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="https://cdn.pixabay.com/photo/2021/07/20/12/43/chamomiles-6480598__340.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> <div class="credit">Made with &#10084; by Learning Robo</div> <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.

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0;
    background: #f2709c;  
    background: -webkit-linear-gradient(to right, #ff9472, #f2709c);  
    background: linear-gradient(to right, #ff9472, #f2709c); 
}
.mySlides {display: none}
img {vertical-align: middle;
height:500px;
border-radius: 10px;
}
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin:20px auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width:auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius:10px;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 10px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #202124;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
.credit{
    text-align: center;
    color: #202124;
    padding-top:15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

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 slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }

We hope you would like this Responsive Image Slider using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this Responsive 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