Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




BUILD THE MASS IN A FEW MONTHS THAT OTHERS BUILD IN YEARS!

Publish perfectly-optimized content in 1-click









 
 
 

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




It might also interest you


How to make Ajax calls with XMLHTTPRequest

How to make Drag and Drop in HTML 5 and JavaScript API

How to copy text to clipboard using html, css and javascript

How to Capture Photo From Camera using Javascript

How to draw in the browser with JavaScript


Leave comment
          

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



Loading...     
close publicity
Japanese ritual of tranquility and... slim figure!