Skip to main content

Archive

Show more

Responsive Automatic Image Slider | HTML CSS And JavaScript

by Rustcode
Responsive-Automatic-Image-Slider-html-css-javascript

Responsive Automatic Image Slider | Using HTML, CSS And JavaScript

“Automatic Responsive Image Slider” is the most popular element in website design as it gives an extraordinary user experience. The main purpose of Image Slider is to change the image on click or automatically. We have made an image slider where the image will be changed on click, you can read that responsive image slider code. So in this article, we will create an "Automatic Responsive Image Slider". We have written an article on "image slider" where the image will change on click and automatically as well, which means both concepts are in one slider, you must visit this article.

We think you have a pretty good idea of how Image Slider will work. We are using Javascript to create dynamic image changes. So let's get started.

The concept is already explained, so let's talk about the technologies that we are using for this animation. html and css are common but we are using the javascript to create dynamic image changes.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Automatic Image Slider | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

Images Github Link: Download 

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive Automatic Image Slider</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="slideshow-container">
        <div class="slide-container fade">
          <img src="slide1.jpg">
        </div>
        <div class="slide-container fade">
          <img src="slide2.jpg">
        </div>
        <div class="slide-container fade">
          <img src="slide3.jpg">
        </div>
        <div class="dot-container">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </div>
      </div>
    </div>
    <div class="content">
      <h1>AUTOMATIC IMAGE SLIDER</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus in mauris efficitur gravida. Cras maximus diam sed tortor maximus, vitae tincidunt lacus commodo. Mauris vitae velit non lectus euismod fringilla eu nec velit. Sed at nibh dignissim nisl consectetur lobortis sit amet in neque. Ut lobortis vitae orci vitae semper. Nam suscipit ligula vel efficitur laoreet. Mauris gravida ultricies ultrices. Pellentesque gravida malesuada sagittis. Maecenas quis iaculis dolor. Donec vel est risus. In eu ultrices erat. Curabitur luctus tellus mi, vitae tempus mi placerat non. Phasellus sollicitudin eleifend urna sit amet condimentum. Suspendisse iaculis neque id nisi euismod volutpat.
        Ut tincidunt nibh tortor, quis lobortis erat suscipit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent commodo est a mauris tincidunt venenatis. Maecenas mattis nisl ac varius suscipit. Pellentesque eu sodales lorem, eget consequat diam. Vivamus convallis ut arcu non eleifend. Vivamus enim dolor, placerat ut euismod ut, gravida eget arcu. Vestibulum laoreet ex id nisi maximus fringilla. Cras tristique consequat velit, id venenatis erat sagittis a.
      </p>
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>



03. CSS

body, html{
  margin: 0px;
}
.container{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slide-container{
  position: relative;
  width: 100%;
  max-height: 670px;
  overflow: hidden;
  display: none;
}
.slideshow-container{
  width: 100%;
  max-height: 670px;
  overflow: hidden;
}
img{
  width: 100%;
  max-height: 670px;
}
.content{
  text-align: center;
  padding: 0px 40px;
  font-family: arial;
  color: #404040;
}
.content p{
  text-align: justify;
  line-height: 1.6em;
  color: grey;
}
.dot-container{
  position: absolute;
  top: 50px;
  right: 50px;
  width: 42px;
  z-index: 1;
}
.dot{
  display: block;
  margin-top: 10px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  padding: 0px;
  margin-bottom: 5px;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px 1px #000;
  background: #fff;
  transition: all 0.4s ease;
}
.active{
  background-color: blue;
}
.fade{
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from{
    opacity: 0.2;
  }
  to{
    opacity: 1;
  }
}



04. JAVASCRIPT

var slideIndex = 0;
showSlides();

function showSlides(){
  var i;
  var slides = document.getElementsByClassName("slide-container");
  var dots = document.getElementsByClassName("dot");
  for(i = 0; i < slides.length; i++){
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  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";
  setTimeout(showSlides, 2000);
}


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.



06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.




Comments

Post a Comment