Two Pure CSS Slideshows in the same page - html

Question

So I've found this Slideshow on the internet, and making it work and adapting it has been kinda easy.
The problem begun when I tryed to put two of the same slideshow on the page, and well it "actually" works, but when the slideshow(1) is on and showing images, the second one is "invisible" (actually not there at all) a part from the navigation-dots.. If I click on any navigation dot then the slider appears, but the slider(2) vanishes and so on.
So I tryed to change every class name and every ID in the slideshow, making two different CSS blocks but with no success.
Here is the CSS for Slider(1)
/* ------------------------------------------------------ SLIDESHOW1 ------------------------------------------- */
.slides1 {
padding: 0;
width: 100%;
min-width: 600px;
height: 100%;
display: block;
margin: 0 auto;
position: relative;
}
.slides1 input { display: none; }
.slide-container1 { display: block; }
.slide1 {
top: 0;
opacity: 0;
width: 100%;
height: 470px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
.slide1 img {
width: 100%;
min-width: 100%;
height: 100%;
margin: 0 auto;
}
.nav1 label {
width: 15%;
height: 100%;
display: none;
position: absolute;
opacity: 0;
z-index: 9;
cursor: pointer;
transition: opacity .2s;
color: #FFF;
font-size: 30pt;
text-align: center;
line-height: 450px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slide1:hover + .nav1 label { opacity: 0.5; }
.nav1 label:hover { opacity: 1; }
.nav1 .next1 { right: 0; }
.textlabel1 {
width: 100%;
height: 50px;
position: absolute;
display: block;
z-index: 90;
top: 350px;
text-shadow: 0px 0px 15px rgb(119, 119, 119);
padding: 0;
margin: 0 auto;
}
.textlabel1 h2 {
font-size: 24px;
text-align: center;
padding: 0;
margin: 0 15px 0 15px;
}
input:checked + .slide-container1 .slide1 {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container1 .nav1 label { display: block; }
.nav-dots1 {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}
.nav-dots1 .nav-dot1 {
top: -5px;
width: 11px;
height: 11px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
}
.nav-dots1 .nav-dot1:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
input#img-1:checked ~ .nav-dots1 label#img-dot-1, input#img-2:checked ~ .nav-dots1 label#img-dot-2, input#img-3:checked ~ .nav-dots1 label#img-dot-3, input#img-4:checked ~ .nav-dots1 label#img-dot-4, input#img-5:checked ~ .nav-dots1 label#img-dot-5, input#img-6:checked ~ .nav-dots1 label#img-dot-6, input#img-7:checked ~ .nav-dots1 label#img-dot-7 {
background: rgba(0, 0, 0, 0.8);
}
Here is the CSS for Slider(2)
/* ------------------------------------------------------ SLIDESHOW 2 ---------------------------------- */
.slides2 {
padding: 0;
width: 100%;
min-width: 600px;
height: 100%;
display: block;
margin: 0 auto;
position: relative;
}
.slides2 input { display: none; }
.slide-container2 { display: block; }
.slide2 {
top: 0;
opacity: 0;
width: 100%;
height: 470px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
.slide2 img {
width: 100%;
min-width: 100%;
height: 100%;
margin: 0 auto;
}
.nav2 label {
width: 15%;
height: 100%;
display: none;
position: absolute;
opacity: 0;
z-index: 9;
cursor: pointer;
transition: opacity .2s;
color: #FFF;
font-size: 30pt;
text-align: center;
line-height: 450px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slide2:hover + .nav2 label { opacity: 0.5; }
.nav2 label:hover { opacity: 1; }
.nav2 .next2 { right: 0; }
.textlabel2 {
width: 100%;
height: 50px;
position: absolute;
display: block;
z-index: 90;
top: 350px;
text-shadow: 0px 0px 15px rgb(119, 119, 119);
padding: 0;
margin: 0 auto;
}
.textlabel2 h2 {
font-size: 24px;
text-align: center;
padding: 0;
margin: 0 15px 0 15px;
}
input:checked + .slide-container2 .slide2 {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container2 .nav2 label { display: block; }
.nav-dots2 {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}
.nav-dots2 .nav-dot2 {
top: -5px;
width: 11px;
height: 11px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
}
.nav-dots2 .nav-dot2:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
input#imga-1:checked ~ .nav-dots2 label#imga-dot-1, input#imga-2:checked ~ .nav-dots2 label#imga-dot-2, input#imga-3:checked ~ .nav-dots2 label#imga-dot-3, input#imga-4:checked ~ .nav-dots2 label#imga-dot-4, input#imga-5:checked ~ .nav-dots2 label#imga-dot-5 {
background: rgba(0, 0, 0, 0.8);
}
And Here is my page, the most-external container for both is the class "room"
<div class="room">
<div style="height: 70px; width: 100%; line-height: 70px; border-bottom: 1px solid black; background-color: #242424; ">
<h2 class="subtitle" style="color: #FFFFFF; text-align: left; padding: 0 0 0 40px;" > Camera Matrimoniale </h2>
</div>
<div style="height: 530px; width: 100%;">
<div style="height: 530px; width: 450px; float: left; padding: 25px 15px 25px 15px">
</div>
<div style="height: 530px; width: 690px; float: right; ">
<!------------------------------------------------------------------------------------------- SLIDESHOW ------------------------------------------------------>
<div style="height: 510px; width: 600px; padding: 10px 0; position: relative; left: 80px;">
<ul class="slides1">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container1">
<div class="slide1">
<img src="../images/cameradouble/BedBreakfast_Letto_Matrimoniale_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Letto Matrimoniale" title="Camera Matrimoniale - Letto Matrimoniale" />
<div class="textlabel1">
<h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Letto Matrimoniale </h2>
</div>
</div>
<div class="nav1">
<label for="img-4" class="prev1">‹</label>
<label for="img-2" class="next1">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container1">
<div class="slide1">
<img src="../images/cameradouble/BedBreakfast_Letto_Singolo_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Letto Singolo" title="Camera Matrimoniale - Letto Singolo"/>
<div class="textlabel1">
<h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Letto Singolo </h2>
</div>
</div>
<div class="nav1">
<label for="img-1" class="prev1">‹</label>
<label for="img-3" class="next1">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container1">
<div class="slide1">
<img src="../images/cameradouble/BedBreakfast_Bagno_Indipendente_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Bagno Indipendente" title="Camera Matrimoniale - Bagno Indipendente"/>
<div class="textlabel1">
<h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Bagno Indipendente </h2>
</div>
</div>
<div class="nav1">
<label for="img-2" class="prev1">‹</label>
<label for="img-4" class="next1">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container1">
<div class="slide1">
<img src="../images/cameradouble/BedBreakfast_Bagno_Indipendente_Doccia_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Doccia Bagno Indipendente" title="Camera Matrimoniale - Doccia Bagno Indipendente"/>
<div class="textlabel1">
<h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Doccia Bagno Indipendente </h2>
</div>
</div>
<div class="nav1">
<label for="img-3" class="prev1">‹</label>
<label for="img-1" class="next1">›</label>
</div>
</li>
<li class="nav-dots1">
<label for="img-1" class="nav-dot1" id="img-dot-1"></label>
<label for="img-2" class="nav-dot1" id="img-dot-2"></label>
<label for="img-3" class="nav-dot1" id="img-dot-3"></label>
<label for="img-4" class="nav-dot1" id="img-dot-4"></label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style="clear: both; height: 20px; width: 100%; min-width: 1200px;"> </div>
<div class="room">
<div style="height: 70px; width: 100%; line-height: 70px; border-bottom: 1px solid black; background-color: #242424; ">
<h2 class="subtitle" style="color: #FFFFFF; text-align: left; padding: 0 0 0 40px;" > Camera Doppia <i> (Anche Uso Singolo) </i> </h2>
</div>
<div style="height: 530px; width: 100%;">
<div style="height: 530px; width: 450px; float: left; padding: 25px 15px 25px 15px">
</div>
<div style="height: 530px; width: 690px; float: right; ">
<!------------------------------------------------------------------------------------------- SLIDESHOW ------------------------------------------------------>
<div style="height: 510px; width: 600px; padding: 10px 0; position: relative; left: 40px;">
<ul class="slides2">
<input type="radio" name="radio-btn" id="imga-1" checked />
<li class="slide-container2">
<div class="slide2">
<img src="../images/camerasingle/BedBreakfast_Letto1_Camera_Doppia.jpg" alt="Camera Doppia - Letto Singolo (1)" title="Camera Doppia - Letto Singolo (1)" />
<div class="textlabel2">
<h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Doppia - Letto Singolo (1) </h2>
</div>
</div>
<div class="nav2">
<label for="imga-3" class="prev2">‹</label>
<label for="imga-2" class="next2">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="imga-2" />
<li class="slide-container2">
<div class="slide2">
<img src="../images/camerasingle/BedBreakfast_Letto2_Camera_Doppia.jpg" alt="Camera Doppia - Letto Singolo (2)" title="Camera Doppia - Letto Singolo (2)"/>
<div class="textlabel2">
<h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Doppia - Letto Singolo (2) </h2>
</div>
</div>
<div class="nav2">
<label for="imga-1" class="prev2">‹</label>
<label for="imga-3" class="next2">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="imga-3" />
<li class="slide-container2">
<div class="slide2">
<img src="../images/camerasingle/BedBreakfast_Bagno_Indipendente_Camera_Doppia.jpg" alt="Camera Doppia - Bagno Indipendente" title="Camera Doppia - Bagno Indipendente"/>
<div class="textlabel2">
<h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Doppia - Bagno Indipendente </h2>
</div>
</div>
<div class="nav2">
<label for="imga-2" class="prev2">‹</label>
<label for="imga-1" class="next2">›</label>
</div>
</li>
<li class="nav-dots2">
<label for="imga-1" class="nav-dot2" id="imga-dot-1"></label>
<label for="imga-2" class="nav-dot2" id="imga-dot-2"></label>
<label for="imga-3" class="nav-dot2" id="imga-dot-3"></label>
</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

That's because you're using input type radio which only allow you to choose one selected item from it's group.
What makes your problem appears is that you group both the slide1 and slide2 with the same name which is name="radio-btn"
What you need to do is just change the group name for the 2 slideshow so it's different between the slide1 and slide2, to name="radio-btn" and name="radio-btn-2" like in this DEMO