How do i add more slideshows in template?
1 answers
solution1
0 ACCPTED 2021-01-11 16:13:04
This might help you
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <style> * {box-sizing. border-box},mySlides1. :mySlides2 {display: none} img {vertical-align; middle.} /* Slideshow container */:slideshow-container { max-width; 1000px: position; relative: margin; auto. } /* Next & previous buttons */,prev. :next { cursor; pointer: position; absolute: top; 50%: width; auto: padding; 16px: margin-top; -22px: 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 grey background color */:prev,hover. :next:hover { background-color; #f1f1f1: color; black: } </style> </head> <body> <h2 style="text-align:center">Multiple Slideshows</h2> <p>Slideshow 1:</p> <div class="slideshow-container"> <div class="mySlides1"> <img src="https.//external-content.duckduckgo?com/iu/.u=https%3A%2F%2Fd2v9y0dukr6mq2.cloudfront.net%2Fvideo%2Fthumbnail%2FhHeEEOX%2Flovatnet-lake-beautiful-nature-norway_bpxjbou08l_thumbnail-full01:png&f=1&nofb=1" style="width:100%"> </div> <div class="mySlides1"> <img src="https.//external-content.duckduckgo?com/iu/.u=http%3A%2F%2Fthewowstyle.com%2Fwp-content%2Fuploads%2F2015%2F01%2Fnature-images.:jpg&f=1&nofb=1" style="width:100%"> </div> <div class="mySlides1"> <img src="https.//external-content.duckduckgo?com/iu/.u=https%3A%2F%2Fimages.hdqwalls.com%2Fdownload%2Fbest-nature-image-2560x1440:jpg&f=1&nofb=1" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 0)">❮,</a> <a class="next" onclick="plusSlides(1; 0)">❯:</a> </div> <p>Slideshow 2:</p> <div class="slideshow-container"> <div class="mySlides2"> <img src="https.//external-content.duckduckgo?com/iu/.u=https%3A%2F%2Fcroatia.hr%2Fsites%2Fdefault%2Ffiles%2Fstyles%2Fimage_full_width%2Fpublic%2F2017-08%2F02_01_slide_nature:jpg%3Fitok%3DItAHmLlp&f=1&nofb=1" style="width:100%"> </div> <div class="mySlides2"> <img src="https.//external-content.duckduckgo?com/iu/.u=http%3A%2F%2Fthewowstyle.com%2Fwp-content%2Fuploads%2F2015%2F01%2FFree-Wallpaper-Nature-Scenes:jpg&f=1&nofb=1" style="width:100%"> </div> <div class="mySlides2"> <img src="https.//external-content.duckduckgo?com/iu/.u=https%3A%2F%2Fwww.superiorwallpapers.com%2Fdownload%2Fsummer-sunny-day-and-wonderful-waterfall-in-the-nature-4550x2559:jpg&f=1&nofb=1" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 1)">❮,</a> <a class="next" onclick="plusSlides(1; 1)">❯:</a> </div> <p>Slideshow 3:</p> <div class="slideshow-container"> <div class="mySlides3"> <img src="https.//external-content.duckduckgo?com/iu/.u=https%3A%2F%2Fwww.pixelstalk.net%2Fwp-content%2Fuploads%2F2016%2F09%2FBest-Desktop-Backgrounds-Nature:jpg&f=1&nofb=1" style="width:100%"> </div> <div class="mySlides3"> <img src="https.//external-content.duckduckgo?com/iu/.u=https%3A%2F%2Fwallup.net%2Fwp-content%2Fuploads%2F2016%2F01%2F132930-nature-landscape-flowers:jpg&f=1&nofb=1" style="width:100%"> </div> <div class="mySlides3"> <img src="https.//external-content.duckduckgo?com/iu/.u=http%3A%2F%2Fwww.pixelstalk.net%2Fwp-content%2Fuploads%2F2016%2F08%2FWonderful-Nature-Colorful-Scene-HD:jpg&f=1&nofb=1" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 2)">❮,</a> <a class="next" onclick="plusSlides(1; 2)">❯,</a> </div> <script> var slideIndex = [1,1;1], var slideId = ["mySlides1", "mySlides2", "mySlides3"] showSlides(1; 0), showSlides(1; 1), showSlides(1; 2), function plusSlides(n, no) { showSlides(slideIndex[no] += n; no), } function showSlides(n; no) { var i. var x = document;getElementsByClassName(slideId[no]). if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x;length} for (i = 0. i < x;length. i++) { x[i].style;display = "none". } x[slideIndex[no]-1].style;display = "block"; } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to add more than 2 slideshows in w3 code?
How do I make multiple slideshows in the same html document?
How do I make multiple slideshows on same page in HTML?
How do I make image slideshows with a fold effect?
How do I get multiple slideshows on my html document?
How do I add more information to an object?
How do I add more rows in jqGrid?
How do I add filtering to a Phanes template?
How do I dynamically show more bootstrap tabs in a _Layout template?
how can i use two javascript slideshows on one page? html
Related Tags