Open Menu dzosoft
Close Menu dzosoft
All About Computer Science and Technology

                twitter instagram facebook pinterest
search on the site
 
 
 

How to create a responsive slideshow with CSS and JavaScript

 
 

Slideshow

 
A slideshow is used to cycle through elements
 

Step 1

Add HTML
<!-- Slideshow container -->
<div class="slideshow-container">
  <!-- Full-width images with number and caption text -->
  <div class="cssSlides fade">
    <div class="number">1 / 4</div>
    <img src="picture-1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>
  <div class="cssSlides fade">
    <div class="number">2 / 4</div>
    <img src="picture-2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="cssSlides fade">
    <div class="number">3 / 4</div>
    <img src="picture-3.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <div class="cssSlides fade">
    <div class="number">4 / 4</div>
    <img src="picture-4.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="Slides(-1)">❮</a>
  <a class="next" onclick="Slides(1)">❯</a>
</div>
<br>

<!-- The dots -->
<div style="text-align:center">
  <span class="dot" onclick="Slide(1)"></span>
  <span class="dot" onclick="Slide(2)"></span>
  <span class="dot" onclick="Slide(3)"></span>
</div>

 

Step 2

Add CSS
Style the next and previous buttons, the caption text and the dots
 {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.cssSlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/4 etc) */
.number {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

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

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

 

Step 3

Add JavaScript
let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function Slides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function Slide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("cssSlides");
  let 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";
}

 

Automatic Slideshow

 
To display an automatic slideshow, use the following code:
let slideIndex = 0;
showSlides();

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("cssSlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

Pictures of

Anita Austvika su Unsplash

Dell su Unsplash

Jessica Fadel su Unsplash

Leave comment
          

Save nickname and email in this browser for the next time.



All about computer science and technology