How to code slide show

Advertisemen

Slideshow / Carousel

A slideshow is used to cycle through elements:

1 / 4

Stone mountain

2 / 4

Codepass logo

3 / 4

Money tree

4 / 4

Good pasture

                          

Create A Slideshow

Step 1) Add HTML:

Example

<div class="slideshow-container"> <br />   <div class="mySlides fade"> <br />     <div class="numbertext"> 1 / 3</div> <br />     <img src="img1.jpg" style="width:100%"><br />     <div class="text"> Caption Text</div> <br />   </div> <br /> <br />   <div class="mySlides fade"> <br />     <div class="numbertext"> 2 / 3</div> <br />     <img src="img2.jpg" style="width:100%"><br />     <div class="text"> Caption Two</div> <br />   </div> <br /> <br />   <div class="mySlides fade"> <br />     <div class="numbertext"> 3 / 3</div> <br />     <img src="img3.jpg" style="width:100%"><br />     <div class="text"> Caption Three</div> <br />   </div> <br /> <br />   <a class="prev" onclick="plusSlides(-1)">❮</a><br />   <a class="next" onclick="plusSlides(1)">❯</a><br /> </div> <br /> <br><br /> <br /> <div style="text-align:center"> <br />   <span class="dot" onclick="currentSlide(1)"></span> <br />   <span class="dot" onclick="currentSlide(2)"></span> <br />   <span class="dot" onclick="currentSlide(3)"></span> <br /> </div>

---

Step 2) Add CSS:

Style the next and previous buttons, the caption text and the dots:

Example

* {box-sizing:border-box}<br /> <br /> /* Slideshow container */<br /> .slideshow-container {<br />   max-width: 1000px;<br />   position: relative;<br />   margin: auto;<br /> }<br /> <br /> .mySlides {<br />     display: none;<br /> }<br /> <br /> /* Next & previous buttons */<br /> .prev, .next {<br />   cursor: pointer;<br />   position: absolute;<br />   top: 50%;<br />   width: auto;<br />   margin-top: -22px;<br />   padding: 16px;<br />   color: white;<br />   font-weight: bold;<br />   font-size: 18px;<br />   transition: 0.6s ease;<br />   border-radius: 0 3px 3px 0;<br /> }<br /> <br /> /* Position the "next button" to the right */<br /> .next {<br />   right: 0;<br />   border-radius: 3px 0 0 3px;<br /> }<br /> <br /> /* On hover, add a black background color with a little bit see-through */<br /> .prev:hover, .next:hover {<br />   background-color: rgba(0,0,0,0.8);<br /> }<br /> <br /> /* Caption text */<br /> .text {<br />   color: #f2f2f2;<br />   font-size: 15px;<br />   padding: 8px 12px;<br />   position: absolute;<br />   bottom: 8px;<br />   width: 100%;<br />   text-align: center;<br /> }<br /> <br /> /* Number text (1/3 etc) */<br /> .numbertext {<br />   color: #f2f2f2;<br />   font-size: 12px;<br />   padding: 8px 12px;<br />   position: absolute;<br />   top: 0;<br /> }<br /> <br /> /* The dots/bullets/indicators */<br /> .dot {<br />   cursor:pointer;<br />   height: 15px;<br />   width: 15px;<br />   margin: 0 2px;<br />   background-color: #bbb;<br />   border-radius: 50%;<br />   display: inline-block;<br />   transition: background-color 0.6s ease;<br /> }<br /> <br /> .active, .dot:hover {<br />   background-color: #717171;<br /> }<br /> <br /> /* Fading animation */<br /> .fade {<br />   -webkit-animation-name: fade;<br />   -webkit-animation-duration: 1.5s;<br />   animation-name: fade;<br />   animation-duration: 1.5s;<br /> }<br /> <br /> @-webkit-keyframes fade {<br />   from {opacity: .4} <br />   to {opacity: 1}<br /> }<br /> <br /> @keyframes fade {<br />   from {opacity: .4} <br />   to {opacity: 1}<br /> }</div> </div> <hr /> <div style="overflow: auto; text-align: center;"> <!-- MidContent --> <br /> <div id="div-gpt-ad-1493883843099-0" style="display: inline-block;"> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); }); </script>

---

Step 3) Add JavaScript:

Example

var slideIndex = 1;<br /> showSlides(slideIndex);<br /> <br /> function plusSlides(n) {<br />   showSlides(slideIndex += n);<br /> }<br /> <br /> function currentSlide(n) {<br />   showSlides(slideIndex = n);<br /> }<br /> <br /> function showSlides(n) {<br />   var i;<br />   var slides = document.getElementsByClassName("mySlides");<br />   var dots = document.getElementsByClassName("dot");<br />   if (n > slides.length) {slideIndex = 1} <br />   if (n < 1) {slideIndex = slides.length}<br />   for (i = 0; i < slides.length; i++) {<br />       slides[i].style.display = "none"; <br />   }<br />   for (i = 0; i < dots.length; i++) {<br />       dots[i].className = dots[i].className.replace(" active", "");<br />   }<br />   slides[slideIndex-1].style.display = "block"; <br />   dots[slideIndex-1].className += " active";<br /> }

---

Automatic Slideshow

To display an automatic slideshow, use the following code:

Example

<div class="w3-code notranslate jsHigh"> var slideIndex = 0;<br /> showSlides();<br /> <br /> function showSlides() {<br />     var i;<br />     var slides = document.getElementsByClassName("mySlides");<br />     for (i = 0; i < slides.length; i++) {<br />         slides[i].style.display = "none"; <br />     }<br />     slideIndex++;<br />     if (slideIndex > slides.length) {slideIndex = 1} <br />     slides[slideIndex-1].style.display = "block"; <br />     setTimeout(showSlides, 2000); // Change image every 2 seconds<br /> }

Advertisemen