html auto slideshow

Solutions on MaxInterview for html auto slideshow by the best coders in the world

showing results for - "html auto slideshow"

29 Feb 2019

1<html>
2  <head>
3    <style>
4      #slider {
5        width: 100%;
6        height: 100%;
7
8        margin: 0 auto;
9        border: 10px solid transparent;
10        padding: 0px;
11
12        z-index: 100;
13        overflow: hidden;
14        white-space: nowrap;
15        box-sizing: border-box;
16      }
17      #slider > li {
18        width: 100%;
19        height: 100%;
20
21        position: relative;
22        display: inline-block;
23        overflow: hidden;
24        font-size: 15px;
25        font-size: initial;
26        line-height: normal;
27        transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); /* Slide css animation */
28        background-size: cover;
29        vertical-align: top;
30        box-sizing: border-box;
31        white-space: normal;
32      }
33    </style>
34  </head>
35  <body>
36    <ul id="slider">
37      <li>
38          <p>Some content.</p>
39      </li>
40      <li>
41          <p>Some more content.</p>
42      </li>
43      <li>
44        <p>And here's space for more.</p>
45      </li>
46    </ul>
47    <script>
48      // Slide every slideDelay seconds
49      const slideDelay = 3000;
50
51      const dynamicSlider = document.getElementById("slider");
52
53      var curSlide = 0;
54      window.setInterval(()=>{
55        curSlide++;
56        if (curSlide === dynamicSlider.childElementCount) {
57          curSlide = 0;
58        }
59
60        // Actual slide
61        dynamicSlider.firstElementChild.style.setProperty("margin-left", "-" + curSlide + "00%");
62      }, slideDelay);
63
64    </script>
65  </body>
66</html>

David

13 May 2020

1<!--automatic slidshow-->
2
3<!DOCTYPE html>
4<html>
5<head>
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<style>
8* {box-sizing: border-box;}
9body {font-family: Verdana, sans-serif;}
10.mySlides {display: none;}
11img {vertical-align: middle;}
12
13/* Slideshow container */
14.slideshow-container {
15  max-width: 1000px;
16  position: relative;
17  margin: auto;
18}
19
20/* Caption text */
21.text {
22  color: #f2f2f2;
23  font-size: 15px;
24  padding: 8px 12px;
25  position: absolute;
26  bottom: 8px;
27  width: 100%;
28  text-align: center;
29}
30
31/* Number text (1/3 etc) */
32.numbertext {
33  color: #f2f2f2;
34  font-size: 12px;
35  padding: 8px 12px;
36  position: absolute;
37  top: 0;
38}
39
40/* The dots/bullets/indicators */
41.dot {
42  height: 15px;
43  width: 15px;
44  margin: 0 2px;
45  background-color: #bbb;
46  border-radius: 50%;
47  display: inline-block;
48  transition: background-color 0.6s ease;
49}
50
51.active {
52  background-color: #717171;
53}
54
55/* Fading animation */
56.fade {
57  -webkit-animation-name: fade;
58  -webkit-animation-duration: 1.5s;
59  animation-name: fade;
60  animation-duration: 1.5s;
61}
62
63@-webkit-keyframes fade {
64  from {opacity: .4} 
65  to {opacity: 1}
66}
67
68@keyframes fade {
69  from {opacity: .4} 
70  to {opacity: 1}
71}
72
73/* On smaller screens, decrease text size */
74@media only screen and (max-width: 300px) {
75  .text {font-size: 11px}
76}
77</style>
78</head>
79<body>
80
81<h2>Automatic Slideshow</h2>
82<p>Change image every 2 seconds:</p>
83
84<div class="slideshow-container">
85
86<div class="mySlides fade">
87  <div class="numbertext">1 / 3</div>
88  <img src="img_nature_wide.jpg" style="width:100%">
89  <div class="text">Caption Text</div>
90</div>
91
92<div class="mySlides fade">
93  <div class="numbertext">2 / 3</div>
94  <img src="img_snow_wide.jpg" style="width:100%">
95  <div class="text">Caption Two</div>
96</div>
97
98<div class="mySlides fade">
99  <div class="numbertext">3 / 3</div>
100  <img src="img_mountains_wide.jpg" style="width:100%">
101  <div class="text">Caption Three</div>
102</div>
103
104</div>
105<br>
106
107<div style="text-align:center">
108  <span class="dot"></span> 
109  <span class="dot"></span> 
110  <span class="dot"></span> 
111</div>
112
113<script>
114var slideIndex = 0;
115showSlides();
116
117function showSlides() {
118  var i;
119  var slides = document.getElementsByClassName("mySlides");
120  var dots = document.getElementsByClassName("dot");
121  for (i = 0; i < slides.length; i++) {
122    slides[i].style.display = "none";  
123  }
124  slideIndex++;
125  if (slideIndex > slides.length) {slideIndex = 1}    
126  for (i = 0; i < dots.length; i++) {
127    dots[i].className = dots[i].className.replace(" active", "");
128  }
129  slides[slideIndex-1].style.display = "block";  
130  dots[slideIndex-1].className += " active";
131  setTimeout(showSlides, 2000); // Change image every 2 seconds
132}
133</script>
134
135</body>
136</html>

similar questions

automatic slide show of pictures html css html and css presentation slides slick slider slidestoshow auto slider in html logo carousel slider html slider html

queries leading to this page