Skip to content

Commit e4310e2

Browse files
peter-power-594peter-power-594
committed
Hotfix: Patches with multiple carousels
Issues when multiple carousels were used in the same page. The default css selector for pagination and navbar were not enough specific, resulting in binding twice the buttons. Clicking the "next button" on one carousel triggered all the carousel. Plus adding related test page
1 parent bf7ed6d commit e4310e2

13 files changed

+196
-22
lines changed

‎dist/css/bootstrap-carousel.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Ex. 8: Coming Soon</a></li>
3838
<li class="pure-menu-item"><a href="index9.html" class="pure-menu-link">Ex. 9: Bootstrap Fade Carousel</a></li>
3939
<li class="pure-menu-item"><a href="index10.html" class="pure-menu-link">Ex. 10: Bootstrap Slide Carousel</a></li>
40+
<li class="pure-menu-item"><a href="index11.html" class="pure-menu-link">Ex. 11: Multiple Carousels</a></li>
4041
</ul>
4142
</div>
4243
</div>

‎dist/index10.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Ex. 8: Coming Soon</a></li>
3434
<li class="pure-menu-item"><a href="index9.html" class="pure-menu-link">Ex. 9: Bootstrap Fade Carousel</a></li>
3535
<li class="pure-menu-item pure-menu-selected"><a href="index10.html" class="pure-menu-link">Ex. 10: Bootstrap Slide Carousel</a></li>
36+
<li class="pure-menu-item"><a href="index11.html" class="pure-menu-link">Ex. 11: Multiple Carousels</a></li>
3637
</ul>
3738
</div>
3839
</div>
@@ -45,7 +46,7 @@ <h2>Simple &amp; lightweight responsive slideshow plugin</h2>
4546

4647
<div class="content">
4748

48-
<!-- Slideshow 9 -->
49+
<!-- Slideshow 10 -->
4950
<h3>Example 10: Bootstrap Carousel Slide Alternative</h3>
5051
<p>Example of using <a href="https://getbootstrap.com/docs/4.5/components/carousel/" target="_blank" rel="nofollow noopenner">BootStrap 4.5.3 Carousel</a> HTML &amp; CSS code with Responsive Slides <sup>2</sup></p>
5152

@@ -83,7 +84,7 @@ <h3>Example 10: Bootstrap Carousel Slide Alternative</h3>
8384
<script src="https://red.phutu.red/shared/js/ui.js"></script>
8485
<script src="./js/responsiveslides.min.js"></script>
8586
<script>
86-
// Slideshow 9
87+
// Slideshow 10
8788
new responsiveSlides( '#carouselFadeExample .carousel-inner', {
8889
bootstrap: true
8990
});

‎dist/index11.html

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example 11: Multiple Carousels | Responsive Slides²</title>
6+
<meta name="robots" content="noindex,nofollow">
7+
<meta name="viewport" content="width=device-width,initial-scale=1">
8+
<link rel="shortcut icon" href="https://red.phutu.red/shared/icons/favicon.ico">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
10+
<link rel="stylesheet" href="https://red.phutu.red/shared/css/theme.css">
11+
<link rel="stylesheet" href="./css/responsiveslides.min.css">
12+
<link rel="stylesheet" href="./css/bootstrap-carousel.min.css">
13+
</head>
14+
<body>
15+
<div id="layout">
16+
<!-- Menu toggle -->
17+
<a href="#menu" id="menuLink" class="menu-link">
18+
<!-- Hamburger icon -->
19+
<span></span>
20+
</a>
21+
22+
<div id="menu">
23+
<div class="pure-menu">
24+
<a class="pure-menu-heading" href="#main">Responsive Slides <sup>2</sup></a>
25+
26+
<ul class="pure-menu-list">
27+
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Ex. 1: Simple Slider</a></li>
28+
<li class="pure-menu-item"><a href="index2.html" class="pure-menu-link">Ex. 2: On-demand Loading</a></li>
29+
<li class="pure-menu-item"><a href="index3.html" class="pure-menu-link">Ex. 3: High-res. Images</a></li>
30+
<li class="pure-menu-item"><a href="index4.html" class="pure-menu-link">Ex. 4: Slider with Pagination</a></li>
31+
<li class="pure-menu-item"><a href="index5.html" class="pure-menu-link">Ex. 5: Slider with Navigation</a></li>
32+
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Ex. 6: Coming Soon</a></li>
33+
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Ex. 7: Coming Soon</a></li>
34+
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Ex. 8: Coming Soon</a></li>
35+
<li class="pure-menu-item"><a href="index9.html" class="pure-menu-link">Ex. 9: Bootstrap Fade Carousel</a></li>
36+
<li class="pure-menu-item"><a href="index10.html" class="pure-menu-link">Ex. 10: Bootstrap Slide Carousel</a></li>
37+
<li class="pure-menu-item pure-menu-selected"><a href="index11.html" class="pure-menu-link">Ex. 11: Multiple Carousels</a></li>
38+
</ul>
39+
</div>
40+
</div>
41+
42+
<div id="main">
43+
<div class="header">
44+
<h1>Responsive Slides <sup>2</sup></h1>
45+
<h2>Simple &amp; lightweight responsive slideshow plugin</h2>
46+
</div>
47+
48+
<div class="content">
49+
50+
<!-- Slideshow 11 -->
51+
<h3>Example 11: Multiple carousels on the same page</h3>
52+
53+
<h4>Classic</h4>
54+
<div class="rslides-wrapper">
55+
<ul class="rslides" id="slider11">
56+
<li class="rslide-active">
57+
<a href="https://www.pexels.com/photo/17188965/" target="_blank">
58+
<img src="https://red.phutu.red/shared/images/1.jpg" width="800" height="400" alt="Butterfly on a leaf">
59+
</a>
60+
</li>
61+
<li>
62+
<a href="https://www.pexels.com/fr-fr/photo/17188967/" target="_blank">
63+
<img src="https://red.phutu.red/shared/images/2.jpg" width="800" height="400" alt="Butterfly in a flower">
64+
</a>
65+
</li>
66+
<li>
67+
<a href="https://www.pexels.com/fr-fr/photo/17188966/" target="_blank">
68+
<img src="https://red.phutu.red/shared/images/3.jpg" width="800" height="400" alt="Butterfly feeding">
69+
</a>
70+
</li>
71+
</ul>
72+
</div>
73+
74+
<h4>Bootstrap Carousel in Slide Mode</h4>
75+
<div id="carouselFadeExample1" class="carousel slide" data-ride="carousel">
76+
<ol class="carousel-indicators">
77+
<li data-target="#carouselFadeExample1" data-slide-to="0" class="active"></li>
78+
<li data-target="#carouselFadeExample1" data-slide-to="1"></li>
79+
<li data-target="#carouselFadeExample1" data-slide-to="2"></li>
80+
</ol>
81+
<div class="carousel-inner">
82+
<div class="carousel-item active">
83+
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
84+
</div>
85+
<div class="carousel-item">
86+
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666" /><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
87+
</div>
88+
<div class="carousel-item">
89+
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555" /><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
90+
</div>
91+
</div>
92+
<a class="carousel-control-prev" href="#carouselFadeExample1" role="button" data-slide="prev">
93+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
94+
<span class="sr-only">Previous</span>
95+
</a>
96+
<a class="carousel-control-next" href="#carouselFadeExample1" role="button" data-slide="next">
97+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
98+
<span class="sr-only">Next</span>
99+
</a>
100+
</div>
101+
102+
103+
<h4>Bootstrap Carousel in Fade Mode</h4>
104+
<div id="carouselFadeExample2" class="carousel slide carousel-fade" data-ride="carousel">
105+
<ol class="carousel-indicators">
106+
<li data-target="#carouselFadeExample2" data-slide-to="0" class="active"></li>
107+
<li data-target="#carouselFadeExample2" data-slide-to="1"></li>
108+
<li data-target="#carouselFadeExample2" data-slide-to="2"></li>
109+
</ol>
110+
<div class="carousel-inner">
111+
<div class="carousel-item active">
112+
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
113+
</div>
114+
<div class="carousel-item">
115+
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666" /><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
116+
</div>
117+
<div class="carousel-item">
118+
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555" /><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
119+
</div>
120+
</div>
121+
<a class="carousel-control-prev" href="#carouselFadeExample2" role="button" data-slide="prev">
122+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
123+
<span class="sr-only">Previous</span>
124+
</a>
125+
<a class="carousel-control-next" href="#carouselFadeExample2" role="button" data-slide="next">
126+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
127+
<span class="sr-only">Next</span>
128+
</a>
129+
</div>
130+
131+
</div>
132+
</div>
133+
</div>
134+
135+
<script src="https://red.phutu.red/shared/js/ui.js"></script>
136+
<script src="./js/responsiveslides.min.js"></script>
137+
<script>
138+
// Slideshow 11
139+
new responsiveSlides( '#slider11', {
140+
nav: true,
141+
pager: true,
142+
auto: false
143+
});
144+
145+
// Bootstrap Carousel
146+
new responsiveSlides( '#carouselFadeExample1 .carousel-inner', {
147+
bootstrap: true,
148+
auto: false
149+
});
150+
151+
// Bootstrap Carousel
152+
new responsiveSlides( '#carouselFadeExample2 .carousel-inner', {
153+
bootstrap: true,
154+
auto: false
155+
});
156+
</script>
157+
</body>
158+
</html>

‎dist/index2.html

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Ex. 8: Coming Soon</a></li>
3838
<li class="pure-menu-item"><a href="index9.html" class="pure-menu-link">Ex. 9: Bootstrap Fade Carousel</a></li>
3939
<li class="pure-menu-item"><a href="index10.html" class="pure-menu-link">Ex. 10: Bootstrap Slide Carousel</a></li>
40+
<li class="pure-menu-item"><a href="index11.html" class="pure-menu-link">Ex. 11: Multiple Carousels</a></li>
4041
</ul>
4142
</div>
4243
</div>

‎dist/index3.html

+1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Ex. 8: Coming Soon</a></li>
4848
<li class="pure-menu-item"><a href="index9.html" class="pure-menu-link">Ex. 9: Bootstrap Fade Carousel</a></li>
4949
<li class="pure-menu-item"><a href="index10.html" class="pure-menu-link">Ex. 10: Bootstrap Slide Carousel</a></li>
50+
<li class="pure-menu-item"><a href="index11.html" class="pure-menu-link">Ex. 11: Multiple Carousels</a></li>
5051
</ul>
5152
</div>
5253
</div>

‎dist/index4.html

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Ex. 8: Coming Soon</a></li>
3434
<li class="pure-menu-item"><a href="index9.html" class="pure-menu-link">Ex. 9: Bootstrap Fade Carousel</a></li>
3535
<li class="pure-menu-item"><a href="index10.html" class="pure-menu-link">Ex. 10: Bootstrap Slide Carousel</a></li>
36+
<li class="pure-menu-item"><a href="index11.html" class="pure-menu-link">Ex. 11: Multiple Carousels</a></li>
3637
</ul>
3738
</div>
3839
</div>

‎dist/index5.html

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Ex. 8: Coming Soon</a></li>
3434
<li class="pure-menu-item"><a href="index9.html" class="pure-menu-link">Ex. 9: Bootstrap Fade Carousel</a></li>
3535
<li class="pure-menu-item"><a href="index10.html" class="pure-menu-link">Ex. 10: Bootstrap Slide Carousel</a></li>
36+
<li class="pure-menu-item"><a href="index11.html" class="pure-menu-link">Ex. 11: Multiple Carousels</a></li>
3637
</ul>
3738
</div>
3839
</div>

0 commit comments

Comments
 (0)