Skip to main content

Responsive Manual Image Slider | Rustcode

by Rustcode
responsive-manual-image-slider-html-css-and-javascript

"Responsive Manual Image Slider" is one of the most useful elements for every website because this effect produces a great effect on the representation of the website landing page and website idea as well. It gives an ultra-premium look on websites. Image sliders are also used in the past and present as well. You can see another article that will help you learn "image sliding automatic and manual combination with responsiveness" because this article only contains "image sliding with responsiveness".We break this animation into two parts, first will show you how to add the next and previous button with javascript, second will show you how to add an indicator to the image slider.


READ ALSO:


Let's discuss, how it works and how it will look. It contains three images, which will be changed by clicking on the previous and next buttons. Below the slider, we have an indicator that will show you which slide is on the screen. You can change the image by clicking on the indicator. To develop this slider, we will use HTML, CSS and JavaScript.

You can read other interesting articles on "web development" on this website. You can also read "articles on the collection of various elements of the website".


READ ALSO:


01. HTML STRUCTURE

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

<body>

    main content.

</body>
</html>


02. HTML

We added three images in background image1, image2 and image3. You can download these images from here.

<body>
  <div class="slideshow-container">
    <div class="image-container">
      <img src="image1.jpg" class="image fade" />
    </div>
    <div class="image-container">
      <img src="image2.jpg" class="image fade" />
    </div>
    <div class="image-container">
      <img src="image3.jpg" class="image fade" />
    </div>
    <a class="prev" onclick="newSlide(-1)">&#10094;</a>
    <a class="next" onclick="newSlide(1)">&#10095;</a>
    <div class="dot-container">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>
  </div>
  <div class="content">
    <h2>SlideShow / Carousel</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>


READ ALSO:


03. NORMAL CSS

* {
  box-sizing: border-box;
}

body {
  padding: 0px;
  margin: 0px;
  background-color: black;
}

.slideshow-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.image-container {
  display: block;
  overflow: hidden;
}

.image-container .image {
  width: 100%;
  max-height: 600px;
  margin: 0px;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 16px;
  margin-top: 22px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  border-radius: 0px 3px 3px 0px;
  cursor: pointer;
  user-select: none;
}

.next {
  right: 0px;
  border-radius: 3px 0px 0px 3px;
}

.prev:hover,
.next:hover {
  background-color: black;
}

.dot-container {
  text-align: center;
}

.dot {
  position: inherit;
  top: -40px;
  height: 8px;
  width: 36px;
  background-color: #bbb;
  border-radius: 0px;
  display: inline-block;
  cursor: pointer;
  z-index: 1;
  transition: all .5s;
}

.active,
.dot:hover {
  background-color: #555;
}

.content {
  color: white;
  text-align: justify;
  padding: 12px 60px;
  letter-spacing: 1px;
  font-family: verdana, sans-serif;
}

.fade {
  animation: fade .3s ease-in-out;
}


04. ANIMATION CSS

@keyframes fade {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


READ ALSO:


05. RESPONSIVE CSS

@media only screen and (max-width:700px) {
  .prev,
  .next {
    padding: 12px;
    font-size: 18px;
  }
  .dot-container {
    padding: 0px;
  }
  .dot {
    height: 4px;
    width: 18px;
  }
  .content {
    font-size: 12px;
    padding: 6px 24px;
  }
}



06. JAVASCRIPT

var slideNo = 1;
Carousel(slideNo);

function Carousel(n) {
  var slides = document.getElementsByClassName("image-container");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideNo = 1;
  }
  if (n < 1) {
    slideNo = slides.length;
  }
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideNo - 1].style.display = "block";
  for (var i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  dots[slideNo - 1].className += " active";

}

function newSlide(n) {
  Carousel(slideNo += n);
}

function currentSlide(n) {
  Carousel(slideNo = n);
}


07. Youtube Video[Part-01]



08. Youtube Video[Part-02]

Comments

Post a Comment