How do I get multiple slideshows on my html document?
Question
I am using the W3 Schools tutorial on how to add multiple slideshows to an HTML document: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple
This is the link. However, my question is how do I add 3 slideshows to the page?
What I have tried was to copy and paste the mySlides2 section in the DIV class and change it from mySlides2 to mySlides3. And I also added mySlides3 to anything that references mySlides2 and 1. However, for mySlides3, I end up with my images just listed vertically down and next/back controls that control mySlides2. This is my code:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="main.css">
<html>
<body>
<p>Face Mask</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="/sample/fm1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm4.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm5.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm6.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm7.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Deodorant</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="/sample/nd1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd4.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
<p>Deodorant</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="/sample/fd1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd4.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
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>
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3
// When I add .mySlides3 here, the images do not appear at all for .mySlides3
{display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 0%;
width: auto;
padding: 50px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 10px 10px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 0px 0 0 0px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
3 answers
solution1
0 ACCPTED 2020-03-20 06:31:54
So I have tested the code and also updated it. There are only a few small 3-4 changes in your HTML file. Please do replace it with your code. There are no changes in CSS file. Just replace your HTML file code with my code and you will see 3 slideshows.
HTML FILE CODE
<link rel="stylesheet" type="text/css" href="main.css">
<html>
<body>
<p>Face Mask</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="/sample/fm1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm4.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm5.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm6.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm7.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Deodorant</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="/sample/nd1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd4.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<p>Deodorant</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="/sample/fd1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd4.jpg" id="border" 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 < 2) {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>
solution2
0 2020-03-20 06:36:22
You have to make a few more adjustments to the code. Your third slideshow should look like this:
<div class="w3-content w3-display-container">
<img class="mySlides3" src="project2/test/block1img.jpg" style="width:100%">
<img class="mySlides3" src="project2/test/block3img.jpg" style="width:100%">
<img class="mySlides3" src="project2/test/block2img.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 2)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 2)">❯</button>
</div>
Then below, adjust like this:
var slideIndex = [2,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showDivs(1, 0);
showDivs(1, 1);
showDivs(1, 2);
Basically, in the slideshow container for plusDivs(a, b), a refers to whether the button increments or decrements the index, while b indicates which slideshow is being changed.
In showDivs(a,b), a refers to which image is shown, while b refers to which slideshow. var slideIndex shows which image should be shown for each slideshow.
solution3
0 2020-03-20 06:46:17
Multiple slide shows On a single page
Add some library file or CDN for this CSS CDN
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet" type="text/css"/>
JS CDN or script
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" type="text/javascript"></script>
<style>
#slider .container-fluid{
padding: 0 15px;
}
#slider .slider-inner{
padding: 0;
}
.slider-inner .item img{
display: block;
width: 100%;
height: auto;
}
.slider-inner h1{
color: purple;
}
</style>
HTML for slide show
Slide Show 1
<section id="slider">
<div class="container-fluid">
<div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>FIRST</h1>
<div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
<div class="item">
<img src="img1.jpg" alt="sliderimg1">
</div>
<div class="item">
<img src="img2.png" alt="sliderimg2">
</div>
<div class="item">
<img src="img3.png" alt="sliderimg3">
</div>
<div class="item">
<img src="img4.png" alt="sliderimg3">
</div>
</div>
</div>
<div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>SECOND</h1>
<div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
<div class="item">
<img src="img1.png" alt="sliderimg1">
</div>
<div class="item">
<img src="img2.png" alt="sliderimg2">
</div>
<div class="item">
<img src="img3.png" alt="sliderimg3">
</div>
<div class="item">
<img src="img4.jpg" alt="sliderimg3">
</div>
</div>
</div>
<div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Third</h1>
<div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
<div class="item">
<img src="img1.jpg" alt="sliderimg1">
</div>
<div class="item">
<img src="img2.png" alt="sliderimg2">
</div>
<div class="item">
<img src="img3.png" alt="sliderimg3">
</div>
<div class="item">
<img src="img4.png" alt="sliderimg3">
</div>
</div>
</div>
<div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>FOURTH</h1>
<div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
<div class="item">
<img src="img1.png" alt="sliderimg1">
</div>
<div class="item">
<img src="img2png" alt="sliderimg2">
</div>
<div class="item">
<img src="img3.png" alt="sliderimg3">
</div>
<div class="item">
<img src="img4.jpg" alt="sliderimg3">
</div>
</div>
</div>
</div>
</section>
Java script for slide show
<script>
$(function () {
var count = 0;
$('.owl-carousel').each(function () {
$(this).attr('id', 'owl-demo' + count);
$('#owl-demo' + count).owlCarousel({
navigation: true,
slideSpeed: 300,
pagination: true,
singleItem: true,
autoPlay: 2000,
autoHeight: true
});
count++;
});
});
</script>
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 do I make multiple slideshows in the same html document?
How do I make multiple slideshows on same page in HTML?
Slideshows(Multiple) for HTML/Webpage
How do i add more slideshows in template?
HTML Page to Display Multiple Slideshows
how can i use two javascript slideshows on one page? html
How can I have multiple Swiper slideshows on a single page?
How do I make image slideshows with a fold effect?
How do I get the html document size using javascript in a UIWebView
how do I get the start animation time for an HTML/SVG document?
Related Tags