html slideshow

<html> <head> <style> #slider { width: 100%; height: 100%; margin: 0 auto; border: 10px solid transparent; padding: 0px; z-index: 100; overflow: hidden; white-space: nowrap; box-sizing: border-box; } #slider > li { width: 100%; height: 100%; position: relative; display: inline-block; overflow: hidden; font-size: 15px; font-size: initial; line-height: normal; transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); /* Slide css animation */ background-size: cover; vertical-align: top; box-sizing: border-box; white-space: normal; } </style> </head> <body> <ul id="slider"> <li> <p>Some content.</p> </li> <li> <p>Some more content.</p> </li> <li> <p>And here's space for more.</p> </li> </ul> <script> // Slide every slideDelay seconds const slideDelay = 3000; const dynamicSlider = document.getElementById("slider"); var curSlide = 0; window.setInterval(()=>{ curSlide++; if (curSlide === dynamicSlider.childElementCount) { curSlide = 0; } // Actual slide dynamicSlider.firstElementChild.style.setProperty("margin-left", "-" + curSlide + "00%"); }, slideDelay); </script> </body> </html>

automatic slideshow in html

<!--automatic slidshow-->

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

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

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

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

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

.active {
  background-color: #717171;
}

/* Fading animation */
.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}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head>
<body>

<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="img_snow_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  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); // Change image every 2 seconds
}
</script>

</body>
</html>

Posted by: Guest on May-13-2020

Code answers related to "html slideshow"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "html slideshow"

Code answers related to "html slideshow"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us