I have a simple slide menu using nothing but CSS, for my school project.
I found a tutorial on a blog and I wanted to add 2 extra slides from what it was presented on the site, bullets appeared, sliding between them work, but not showing up anything upon selection.
Here is what I've done:
#import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);
* {
margin: 0;
padding: 0;
}
body {
background-color: #666;
}
h1 {
color: #333;
text-shadow: 1px 1px #999;
font-size: 40px;
font-family: Archivo Narrow;
margin: 40px;
text-align: center;
}
.slider {
display: block;
height: 600px;
min-width: 260px;
max-width: 1200px;
margin: auto;
margin-top: 10px;
position: relative;
}
.sliderinner {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.sliderinner>ul {
list-style: none;
height: 100%;
width: 500%;
overflow: hidden;
position: relative;
left: 0px;
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
.sliderinner>ul>li {
width: 20%;
height: 600px;
float: left;
position: relative;
}
.sliderinner>ul>li>img {
margin: auto;
height: 100%;
}
.slider input[type=radio] {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 100;
visibility: hidden;
}
.slider label {
position: absolute;
left: 50%;
bottom: -45px;
z-index: 100;
width: 12px;
height: 12px;
background-color: #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
.slider input[type=radio]#control1:checked~label[for=control1] {
background-color: #333;
}
.slider input[type=radio]#control2:checked~label[for=control2] {
background-color: #333;
}
.slider input[type=radio]#control3:checked~label[for=control3] {
background-color: #333;
}
.slider input[type=radio]#control4:checked~label[for=control4] {
background-color: #333;
}
.slider input[type=radio]#control5:checked~label[for=control5] {
background-color: #333;
}
.slider input[type=radio]#control6:checked~label[for=control6] {
background-color: #333;
}
.slider input[type=radio]#control7:checked~label[for=control7] {
background-color: #333;
}
.slider label[for=control1] {
margin-left: -54px
}
.slider label[for=control2] {
margin-left: -36px
}
.slider label[for=control3] {
margin-left: -18px
}
.slider label[for=control5] {
margin-left: 18px
}
.slider label[for=control6] {
margin-left: 36px
}
.slider label[for=control7] {
margin-left: 54px
}
.slider input[type=radio]#control1:checked~.sliderinner>ul {
left: 0
}
.slider input[type=radio]#control2:checked~.sliderinner>ul {
left: -100%
}
.slider input[type=radio]#control3:checked~.sliderinner>ul {
left: -200%
}
.slider input[type=radio]#control4:checked~.sliderinner>ul {
left: -300%
}
.slider input[type=radio]#control5:checked~.sliderinner>ul {
left: -400%
}
.slider input[type=radio]#control6:checked~.sliderinner>ul {
left: -500%
}
.slider input[type=radio]#control7:checked~.sliderinner>ul {
left: -600%
}
.description {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-family: Archivo Narrow;
z-index: 1000;
}
.description-text {
background-color: rgba(0, 0, 0, .8);
padding: 10px;
top: 0;
size: 40px;
z-index: 4;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
color: #fff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="sliderstyle.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>"Why Should I Learn English?" - 10 Compelling Reasons for EFL Learners</h1>
<div class="slider">
<input type="radio" id="control1" name="controls" checked="checked" />
<label for="control1"></label>
<input type="radio" id="control2" name="controls" />
<label for="control2"></label>
<input type="radio" id="control3" name="controls" />
<label for="control3"></label>
<input type="radio" id="control4" name="controls" />
<label for="control4"></label>
<input type="radio" id="control5" name="controls" />
<label for="control5"></label>
<input type="radio" id="control6" name="controls" />
<label for="control6"></label>
<input type="radio" id="control7" name="controls" />
<label for="control7"></label>
<div class="sliderinner">
<ul>
<li>
<img src="image1.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English is one of the most widely spoken languages</h2>
<p>Although it comes....
</p>
</div>
</div>
</li>
<li>
<img src="image2.jpg" height="600px" width="1200">
<div class="description">
<div class="description-text">
<h2>English will open up more opportunities for you</h2>
<p>Being able ....</p>
</div>
</div>
</li>
<li>
<img src="image3.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English gives you access to some of the world's best universities</h2>
<p>English is widely ....</p>
</div>
</div>
</li>
<li>
<img src="image4.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English is the language of some of the world's greatest literature</h2>
<p>If you learn English...</p>
</div>
</div>
</li>
<li>
<img src="image5.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English gives you wider access to knowledge</h2>
<p>Did you know that...</p>
</div>
</div>
</li>
<li>
<img src="images/6.jpg" />
<div class="description">
<div class="description-text">
<h2>English is a fantastic intellectual challenge</h2>
<p>English is undoubtedly...</p>
</div>
</div>
</li>
<li>
<img src="images/7.jpg" />
<div class="description">
<div class="description-text">
<h2>English allows you to get more from popular culture</h2>
<p>The world's highest....</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<!--slider-->
</body>
</html>
</body>
</html>
Before you had 5 controls, so your li was only 20%(100/5=20%) but now because you have 7 controls you have to do this calc: 100/7 =14.28%, so change this value in your li (or as pointed out by #Pangloss in a comment below, you can use width:calc(100% / 7) instead)
Plus, in your ul its changing the checked position at each 100% so set ul to width:700% for 7 controls
Just a side note: avoid using width/height HTML tags, instead use them in CSS.
#import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);
* {
margin: 0;
padding: 0;
}
body {
background-color: #666;
}
h1 {
color: #333;
text-shadow: 1px 1px #999;
font-size: 40px;
font-family: Archivo Narrow;
margin: 40px;
text-align: center;
}
.slider {
display: block;
height: 600px;
min-width: 260px;
max-width: 1200px;
margin: auto;
margin-top: 10px;
position: relative;
}
.sliderinner {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.sliderinner>ul {
list-style: none;
height: 100%;
width: 700%;
overflow: hidden;
position: relative;
left: 0px;
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
.sliderinner>ul>li {
width: calc(100% / 7);
height: 600px;
float: left;
position: relative;
}
.sliderinner>ul>li>img {
margin: auto;
height: 100%;
max-width: 100%
}
.slider input[type=radio] {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 100;
visibility: hidden;
}
.slider label {
position: absolute;
left: 50%;
bottom: -45px;
z-index: 100;
width: 12px;
height: 12px;
background-color: #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
.slider input[type=radio]#control1:checked~label[for=control1] {
background-color: #333;
}
.slider input[type=radio]#control2:checked~label[for=control2] {
background-color: #333;
}
.slider input[type=radio]#control3:checked~label[for=control3] {
background-color: #333;
}
.slider input[type=radio]#control4:checked~label[for=control4] {
background-color: #333;
}
.slider input[type=radio]#control5:checked~label[for=control5] {
background-color: #333;
}
.slider input[type=radio]#control6:checked~label[for=control6] {
background-color: #333;
}
.slider input[type=radio]#control7:checked~label[for=control7] {
background-color: #333;
}
.slider label[for=control1] {
margin-left: -54px
}
.slider label[for=control2] {
margin-left: -36px
}
.slider label[for=control3] {
margin-left: -18px
}
.slider label[for=control5] {
margin-left: 18px
}
.slider label[for=control6] {
margin-left: 36px
}
.slider label[for=control7] {
margin-left: 54px
}
.slider input[type=radio]#control1:checked~.sliderinner>ul {
left: 0
}
.slider input[type=radio]#control2:checked~.sliderinner>ul {
left: -100%
}
.slider input[type=radio]#control3:checked~.sliderinner>ul {
left: -200%
}
.slider input[type=radio]#control4:checked~.sliderinner>ul {
left: -300%
}
.slider input[type=radio]#control5:checked~.sliderinner>ul {
left: -400%
}
.slider input[type=radio]#control6:checked~.sliderinner>ul {
left: -500%
}
.slider input[type=radio]#control7:checked~.sliderinner>ul {
left: -600%
}
.description {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-family: Archivo Narrow;
z-index: 1000;
}
.description-text {
background-color: rgba(0, 0, 0, .8);
padding: 10px;
top: 0;
size: 40px;
z-index: 4;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
color: #fff;
}
<h1>"Why Should I Learn English?" - 10 Compelling Reasons for EFL Learners</h1>
<div class="slider">
<input type="radio" id="control1" name="controls" checked="checked" />
<label for="control1"></label>
<input type="radio" id="control2" name="controls" />
<label for="control2"></label>
<input type="radio" id="control3" name="controls" />
<label for="control3"></label>
<input type="radio" id="control4" name="controls" />
<label for="control4"></label>
<input type="radio" id="control5" name="controls" />
<label for="control5"></label>
<input type="radio" id="control6" name="controls" />
<label for="control6"></label>
<input type="radio" id="control7" name="controls" />
<label for="control7"></label>
<div class="sliderinner">
<ul>
<li>
<img src="//lorempixel.com/1200/600" />
<div class="description">
<div class="description-text">
<h2>English is one of the most widely spoken languages</h2>
<p>Although it comes....
</p>
</div>
</div>
</li>
<li>
<img src="//lorempixel.com/1200/600" />
<div class="description">
<div class="description-text">
<h2>English will open up more opportunities for you</h2>
<p>Being able ....</p>
</div>
</div>
</li>
<li>
<img src="//lorempixel.com/1200/600" />
<div class="description">
<div class="description-text">
<h2>English gives you access to some of the world's best universities</h2>
<p>English is widely ....</p>
</div>
</div>
</li>
<li>
<img src="//lorempixel.com/1200/600" />
<div class="description">
<div class="description-text">
<h2>English is the language of some of the world's greatest literature</h2>
<p>If you learn English...</p>
</div>
</div>
</li>
<li>
<img src="//lorempixel.com/1200/600" />
<div class="description">
<div class="description-text">
<h2>English gives you wider access to knowledge</h2>
<p>Did you know that...</p>
</div>
</div>
</li>
<li>
<img src="//lorempixel.com/1200/600" />
<div class="description">
<div class="description-text">
<h2>English is a fantastic intellectual challenge</h2>
<p>English is undoubtedly...</p>
</div>
</div>
</li>
<li>
<img src="//lorempixel.com/1200/600" />
<div class="description">
<div class="description-text">
<h2>English allows you to get more from popular culture</h2>
<p>The world's highest....</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<!--slider-->
The two new <img> tags that you added in your HTML I believe is throwing it off. The new ones you put in resemble <img src="images/6.jpg" where the ones that you have above are. <img src="image4.jpg" width="1200px" height="600px">
Try making your new image tags in the same format and also get rid of the "/" after images in both 6.jpg and 7.jpg.
Related
This question already has answers here:
How do I change the color of radio buttons?
(27 answers)
Closed 9 months ago.
I have simple slideshow with 3 images, I need to make background color of the checked button(obviously, each button refers to one img). I tried literally all possible solutions in the google, I would be really thankful if anyone could help me. Thanks in advance!
Here is my slideshow code:
.slider {
transform: translateX(20%);
display: inline-block;
position: relative;
width: 61%;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px 0px;
}
.images {
display: flex;
width: 100%;
}
.images img {
width: 100%;
transition: all 0.15s ease;
}
.images input {
display: none;
}
.dots {
display: flex;
justify-content: center;
margin: 5px;
}
.dots label {
height: 15px;
width: 15px;
border-radius: 50%;
border: solid #13447E 3px;
cursor: pointer;
transition: all 0.15s ease;
margin: 5px;
}
#img1:checked ~ .m1 {
margin-left: 0;
}
#img2:checked ~ .m2 {
margin-left: -100%;
}
#img3:checked ~ .m3 {
margin-left: -200%;
}
<div class="slider">
<div class="images">
<input type="radio" name="slide" id="img1" checked>
<input type="radio" name="slide" id="img2">
<input type="radio" name="slide" id="img3">
<img src="img/img1.jpeg" class="m1" alt="img1">
<img src="img/img2.jpeg" class="m2" alt="img2">
<img src="img/img3.jpeg" class="m3" alt="img3">
</div>
<div class="dots">
<label for="img1"></label>
<label for="img2"></label>
<label for="img3"></label>
</div>
</div>
Try to set radio button before label
.slider {
transform: translateX(20%);
display: inline-block;
position: relative;
width: 61%;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px 0px;
}
.images {
display: flex;
width: 100%;
}
.images img {
width: 100%;
transition: all 0.15s ease;
}
.images input {
display: none;
}
.dots {
display: flex;
justify-content: center;
margin: 5px;
}
.dots label {
height: 15px;
width: 15px;
border-radius: 50%;
border: solid #13447E 3px;
cursor: pointer;
transition: all 0.15s ease;
margin: 5px;
}
#img1:checked ~ .m1 {
margin-left: 0;
}
#img2:checked ~ .m2 {
margin-left: -100%;
}
#img3:checked ~ .m3 {
margin-left: -200%;
}
[type="radio"] {
display: none;
}
input[type="radio"]:checked+label{border-color:red;}
<div class="slider">
<div class="images">
<img src="img/img1.jpeg" class="m1" alt="img1">
<img src="img/img2.jpeg" class="m2" alt="img2">
<img src="img/img3.jpeg" class="m3" alt="img3">
</div>
<div class="dots">
<input type="radio" name="slide" id="img1" checked>
<label for="img1"></label>
<input type="radio" name="slide" id="img2">
<label for="img2"> </label>
<input type="radio" name="slide" id="img3">
<label for="img3"></label>
</div>
</div>
Here's a solution with a bit of javascript :)
.slider {
transform: translateX(20%);
display: inline-block;
position: relative;
width: 61%;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px 0px;
}
.images {
display: flex;
width: 100%;
}
.images img {
width: 100%;
transition: all 0.15s ease;
}
.images input {
display: none;
}
.dots {
display: flex;
justify-content: center;
margin: 5px;
}
.dots label {
height: 15px;
width: 15px;
border-radius: 50%;
border: solid #13447E 3px;
cursor: pointer;
transition: all 0.15s ease;
margin: 5px;
}
#img1:checked ~ .m1 {
margin-left: 0;
}
#img2:checked ~ .m2 {
margin-left: -100%;
}
#img3:checked ~ .m3 {
margin-left: -200%;
}
.active {
background-color: rgb(153, 153, 255);
}
<div class="slider">
<div class="images">
<input type="radio" name="slide" id="img1" checked>
<input class="" type="radio" name="slide" id="img2">
<input class="" type="radio" name="slide" id="img3">
<img src="img/img1.jpeg" class="m1" alt="img1">
<img src="img/img2.jpeg" class="m2" alt="img2">
<img src="img/img3.jpeg" class="m3" alt="img3">
</div>
<div class="dots">
<label id="dot1" class="active" onclick="activate('dot1')" for="img1"></label>
<label id="dot2" class="" onclick="activate('dot2')" for="img2"></label>
<label id="dot3" class="" onclick="activate('dot3')" for="img3"></label>
</div>
</div>
<script>
var lastActiveDot = document.getElementById("dot1");
function activate(id){
var newActiveDot = document.getElementById(id);
newActiveDot.classList.add("active");
lastActiveDot.classList.remove("active")
lastActiveDot = newActiveDot;
}
</script>
I am a beginner in CSS3 and HTML5, and right now I'm trying to create a HTML5 and CSS3 website in order to code a PSD mock-up.
The problem came once I started with the slider. Normally it should be a carousel slider with 2 images, a progress bar in the bottom and an animation to make it work in a loop.
So, first I have created a main div with two other divs inside containing radio inputs, that way I could get the next and previous arrows working in order to pass from one slide to another.
Then, in my css file, I've created the #keyframes with the opacity effect to proceed with the fade animation. Unfortunately this is not working as I thought, just the arrows but not the fade animation.
Could someone help me and have a look at my code? I'll really appreciate it!
HERE IS MY HTML5 CODE:
#keyframes click{
0%{ opacity:.4;}
100%{opacity:1;}
}
#keyframes fade{
0% {opacity:1}
45% { opacity: 1}
50% { opacity: 0}
95% {opacity:0}
100% { opacity: 1}
}
#keyframes fade2{
0% {opacity:0}
45% { opacity: 0}
50% { opacity: 1}
95% { opacity: 1 }
100% { opacity:0}
}
#i1, #i2{ display: none;}
.slider{
width: 100%;
height: 550px;
margin: 20px auto;
position: rela
}
#first, #second{
position: absolute;
width: 100%;
height: 100%;
}
.previous{
width: 35px;
height: 70px;
position: absolute;
top:40%;
left:0;
background-color: rgba(70, 70, 70,0.6);
border-radius: 0px 50px 50px 0px;
}
.next{
width: 35px;
height: 70px;
position: absolute;
top:40%;
right: 0;
background-color: rgba(70, 70, 70,0.6);
border-radius: 50px 0px 0px 50px;
}
.prev:hover, .next:hover{
transition: .3s;
background-color: rgba(99, 99, 99, 1);
}
.fas.fa-chevron-left{
position: absolute;
left : 0;
top: 30%;
margin-left: 5px;
color: #fff;
font-size: 30px;
}
.fas.fa-chevron-right{
position: absolute;
right: 0;
top: 30%;
margin-right: 5px;
color: white;
font-size: 30px;
}
.slider div#first {
background: url('img1.jpg') no-repeat center;
background-size: cover;
animation:fade 30000s infinite linear;
-webkit-animation:fade 30000s infinite linear;
}
.slider div#second{
background: url('img2.jpg') no-repeat center;
background-size: cover;
animation: fade2 30000ms infinite linear;
-webkit-animation: fade2 30000ms infinite linear;
}
.slide{z-index:-1;}
#i1:checked ~ #first,
#i2:checked ~ #second
{z-index: 10; animation: click 1s ease-in-out;}
<body>
<div class="slider">
<input type="radio" id="i1" name="images" checked />
<input type="radio" id="i2" name="images" />
<div class="slide" id="first">
<h1>WEBAGENCY: L'AGANCE DE TOUS <br> VOS PROJETS !</h1>
<p>Vous avez un projet ? La WebAgency vous aide à les realiser !</p>
<label class="previous" for="i2"><i class="fas fa-chevron-left"></i></label>
<label class="next" for="i2"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="slide" id="second">
<label class="previous" for="i1"><i class="fas fa-chevron-left"></i></label>
<label class="next" for="i1"><i class="fas fa-chevron-right"></i></label> </div>
</div>
</body>
Unfortunately, I'm not sure if it's possible to combine:
Progress in the bottom
Working buttons on the sides
Auto-advance
Just using CSS/HTML. You need to store your state as radio buttons, but if you advance using a linear animation, what will happen if the user wants to go back? How do you synchronize the state?
You CAN have both progress and working buttons. I have made an example based on your code on how to achieve that, with ability to add 2+ slides.
.radio {
display: none;
}
.slider {
width: 100%;
height: 175px;
position: absolute;
left: 0;
top: 0;
}
.slider__slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: 1s opacity;
}
.slider__slide:nth-of-type(1) {
background: IndianRed;
}
.slider__slide:nth-of-type(2) {
background: Cornsilk;
}
.slider__slide:nth-of-type(3) {
background: PaleTurquoise;
}
.button {
width: 35px;
height: 70px;
position: absolute;
top: 40%;
background-color: rgba(70, 70, 70, 0.6);
}
.button--previous {
left: 0;
border-radius: 0px 50px 50px 0px;
}
.button--next {
right: 0;
border-radius: 50px 0px 0px 50px;
}
.button:hover {
transition: 0.3s;
background-color: rgba(99, 99, 99, 1);
}
.radio:nth-of-type(1):checked ~ .slider__slide:nth-of-type(1),
.radio:nth-of-type(2):checked ~ .slider__slide:nth-of-type(2),
.radio:nth-of-type(3):checked ~ .slider__slide:nth-of-type(3){
opacity: 1;
pointer-events: auto;
}
.progress {
margin: 0;
padding: 0;
position: absolute;
top: 175px;
left: 0;
right: 0;
text-align: center;
list-style-type: none;
}
.progress__item {
position: relative;
display: inline-block;
margin: 1px;
border: 3px solid black;
width: 16px;
height: 16px;
}
.radio:nth-of-type(1):checked ~ .progress .progress__item:nth-of-type(1):before,
.radio:nth-of-type(2):checked ~ .progress .progress__item:nth-of-type(2):before,
.radio:nth-of-type(3):checked ~ .progress .progress__item:nth-of-type(3):before{
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
content: '';
background: black;
}
.fas.fa-chevron-left {
position: absolute;
left: 0;
top: 30%;
margin-left: 5px;
color: #fff;
font-size: 30px;
}
.fas.fa-chevron-right {
position: absolute;
right: 0;
top: 30%;
margin-right: 5px;
color: white;
font-size: 30px;
}
<body>
<div class="slider">
<input id="i1" class="radio" name="images" type="radio" checked />
<input id="i2" class="radio" name="images" type="radio" />
<input id="i3" class="radio" name="images" type="radio" />
<div class="slider__slide">
<h1>FIRST SLIDE</h1>
<p>First Subtitle</p>
<label class="button button--previous" for="i3"><i class="fas fa-chevron-left"></i></label>
<label class="button button--next" for="i2"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="slider__slide">
<h1>SECOND SLIDE</h1>
<p>Second Subtitle</p>
<label class="button button--previous" for="i1"><i class="fas fa-chevron-left"></i></label>
<label class="button button--next" for="i3"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="slider__slide">
<h1>THIRD SLIDE</h1>
<p>Third Subtitle</p>
<label class="button button--previous" for="i2"><i class="fas fa-chevron-left"></i></label>
<label class="button button--next" for="i1"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="progress">
<label class="progress__item" for="i1"></label>
<label class="progress__item" for="i2"></label>
<label class="progress__item" for="i3"></label>
</div>
</div>
</body>
I have two slideshows made in pure CSS in an html page, each one is inside its own tooltip but one of them (Piediluco) doesn't work properly because its images doesn't slide correctly.
body {
background-color: #000000;
}
.tooltip, .tooltip2 {
position: relative;
display: inline-block;
padding: 400px 0 0 0;
margin: 0;
cursor: pointer;
color: #5790ce;
}
.tooltip:hover .info, .tooltip:focus .info,
.tooltip2:hover .info2, .tooltip2:focus .info2 {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.info, .info2 {
box-sizing: border-box;
position: absolute;
bottom: -380px;
left: 95px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info:before, .info2:before {
position: absolute;
content: '';
width: 100%;
height: 14px;
bottom: -14px;
left: 0;
}
.info:after, .info2:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 378px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
#i1, #i2, #i3, #i4,
#i12, #i22, #i32, #i42 {
display: none;
}
.container, .container2 {
margin: 0;
position: relative;
width: 100%;
height: 120px;
padding-bottom: 38%;
user-select: none;
background-color: #1c1c1c;
}
.container .slide_img,
.container2 .slide_img2 {
position: absolute;
width: 100%;
height: 100%;
}
.container .slide_img .img,
.container2 .slide_img2 .img2 {
width: inherit;
height: inherit;
}
.container .slide_img .caption,
.container2 .slide_img2 .caption2 {
position: relative;
display: inline-block;
width: 100%;
bottom: 46px;
text-align: center;
padding-top: 5px;
padding-bottom: 14px;
background-color: rgba(242,242,242,.5);
color: #FFFFFF;
}
.lblp, .lbln, .lblp2, .lbln2 {
width: 12%;
height: 22%;
position: absolute;
top: 40%;
background-color: rgba(242,242,242,.3);
z-index: 99;
transition: background-color 1s;
cursor: pointer;
}
.lbln, .lbln2 {
right: 0;
border-radius: 5px 0 0 5px;
}
.lblp, .lblp2 {
left: 0;
border-radius: 0 5px 5px 0;
}
.lblp:hover, .lbln:hover,
.lblp2:hover, .lbln2:hover {
background-color: rgba(242,242,242,.1);
}
.prev, .prev2 {
position: absolute;
font-family: Arial, sans-serif;
color: rgba(244, 244, 244,.9);
font-size: 40pt;
padding: 0 0 15px 20px;
margin: 0;
top: 25%;
transition: color 1s;
}
.next, .next2 {
position: absolute;
font-family: Arial, sans-serif;
color: rgba(244, 244, 244,.9);
font-size: 40pt;
padding: 0 0 15px 25px;
margin: 0;
top: 25%;
transition: color 1s;
}
.prev:hover, .next:hover,
.prev2:hover, .next2:hover {
color: rgba(244, 244, 244,1);
}
.slide_img, .slide_img2 {
z-index: -1;
}
#i1:checked ~ #one,
#i2:checked ~ #two,
#i3:checked ~ #three,
#i4:checked ~ #four,
#i12:checked ~ #one2,
#i22:checked ~ #two2,
#i32:checked ~ #three3,
#i42:checked ~ #four2 {
z-index: 9;
animation: scroll 1s ease-in-out;
}
#keyframes scroll{
0%{ opacity:.4;}
100%{opacity:1;}
}
.text, .text2 {
display: block;
padding: 14px 17px 35px 17px;
color: #8d7200;
}
.more, .more2 {
display: inline;
position: relative;
bottom: 20px;
left: 215px;
margin: 0;
padding: 3px 10px;
font-family: 'Times New Roman', sans-serif;
text-decoration: none;
color: green;
font-size: 20px;
font-weight: bold;
border: 2px solid green;
border-radius: 5px;
transition: background-color 0.5s, color 0.5s;
}
.more:hover, .more:focus,
.more2:hover, .more2:focus {
background-color: green;
color: #FFFFFF;
}
<div onclick="void(0);" class="tooltip">Trasimeno
<div class="info">
<div class="container">
<input type="radio" id="i1" name="images" checked>
<input type="radio" id="i2" name="images">
<input type="radio" id="i3" name="images">
<input type="radio" id="i4" name="images">
<div class="slide_img" id="one">
<img class="img" src="https://i.imgur.com/W5E69l9.jpg">
<span class="caption">...................</span>
<label class="lblp" for="i4"><span class="prev">‹</span></label>
<label class="lbln" for="i2"><span class="next">›</span></label>
</div>
<div class="slide_img" id="two">
<img class="img" src="https://i.imgur.com/eGbNeOB.jpg">
<span class="caption">...................</span>
<label class="lblp" for="i1"><span class="prev">‹</span></label>
<label class="lbln" for="i3"><span class="next">›</span></label>
</div>
<div class="slide_img" id="three">
<img class="img" src="https://i.imgur.com/hp2OiNB.jpg">
<span class="caption">...................</span>
<label class="lblp" for="i2"><span class="prev">‹</span></label>
<label class="lbln" for="i4"><span class="next">›</span></label>
</div>
<div class="slide_img" id="four">
<img class="img" src="https://i.imgur.com/MHZj0eb.jpg">
<span class="caption">...................</span>
<label class="lblp" for="i3"><span class="prev">‹</span></label>
<label class="lbln" for="i1"><span class="next">›</span></label>
</div>
</div>
<div class="text">...................................................</div>
<a class="more" href="#" target="_blank">More</a>
</div>
</div>
<div onclick="void(0);" class="tooltip2">Piediluco
<div class="info2">
<div class="container2">
<input type="radio" id="i12" name="images2" checked>
<input type="radio" id="i22" name="images2">
<input type="radio" id="i32" name="images2">
<input type="radio" id="i42" name="images2">
<div class="slide_img2" id="one2">
<img class="img2" src="https://i.imgur.com/S12ZVXY.jpg">
<span class="caption2">.....................</span>
<label class="lblp2" for="i32"><span class="prev2">‹</span></label>
<label class="lbln2" for="i12"><span class="next2">›</span></label>
</div>
<div class="slide_img2" id="two2">
<img class="img2" src="https://i.imgur.com/3JcEZp7.jpg">
<span class="caption2">.....................</span>
<label class="lblp2" for="i32"><span class="prev2">‹</span></label>
<label class="lbln2" for="i12"><span class="next2">›</span></label>
</div>
<div class="slide_img2" id="three2">
<img class="img2" src="https://i.imgur.com/kayLkDW.jpg">
<span class="caption2">.....................</span>
<label class="lblp2" for="i32"><span class="prev2">‹</span></label>
<label class="lbln2" for="i12"><span class="next2">›</span></label>
</div>
<div class="slide_img2" id="four2">
<img class="img2" src="https://i.imgur.com/gfRwbU2.jpg">
<span class="caption2">.....................</span>
<label class="lblp2" for="i32"><span class="prev2">‹</span></label>
<label class="lbln2" for="i12"><span class="next2">›</span></label>
</div>
</div>
<div class="text2">...................................................</div>
<a class="more2" href="#" target="_blank">More</a>
</div>
</div>
How can I find the error/s?
I have a problem with my slider.
Currently on my homepage it works fine. But when i resize it to a mobile version (max: 480px), the image dissapears while resizing from 1920px to 480px. The slider itself (the buttons and border) stay the same, it's basically only the image itself. Jsfiddle: https://jsfiddle.net/s8jotqj3/2/
/* slider test*/
#Slider {
width: 100%;
max-width: 1940px;
height: 470px;
margin-top:-150px;
position: relative;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.bgslide {
background-color: black;
position: relative;
margin-top:440px;
height:30px;
z-index:5;
bottom:0;
opacity: 0.5;
}
#s1, #s2, #s3, #s4 {
padding: 6px;
background: white;
position: absolute;
left: 50%;
bottom: 10px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1 {
margin-left: -36px;
border-radius: 20px;
}
#s2 {
margin-left: -12px;
border-radius: 20px;
}
#s3 {
margin-left: 12px;
border-radius: 20px;
}
#s4 {
margin-left: 36px;
border-radius: 20px;
}
#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
opacity: .50;
}
.SliderBinnen {
width: 100%;
max-width: 1930px;
height: 470px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.control {
display: none;
}
#Slide1:checked ~ .SliderCenter {
margin-left: 0%;
}
#Slide2:checked ~ .SliderCenter {
margin-left: -100%;
}
#Slide3:checked ~ .SliderCenter {
margin-left: -200%;
}
#Slide4:checked ~ .SliderCenter {
margin-left: -300%;
}
#Slide1:checked + #s1 {
opacity: 1;
}
#Slide2:checked + #s2 {
opacity: 1;
}
#Slide3:checked + #s3 {
opacity: 1;
}
#Slide4:checked + #s4 {
opacity: 1;
}
.SliderCenter {
width: 400%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.slide img {
width: 25%;
float:left;
}
That's the code for the normal desktop screen.
This is my HTML code:
<div id="SliderVanbuiten">
<div class="SliderBinnen">
<input checked type="radio" name="slide" class="control" id="Slide1" />
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2" />
<label for="Slide2" id="s2"></label>
<input type="radio" name="slide" class="control" id="Slide3" />
<label for="Slide3" id="s3"></label>
<input type="radio" name="slide" class="control" id="Slide4" />
<label for="Slide4" id="s4"></label>
<div class="bgslide"></div>
<div class="SliderCenter">
<a class="slide inactive" href=""><img class="testshow" src="images/slide3.jpg" /></a>
<a class="slide inactive" href=""><img class="test" src="images/slide4.jpg" /></a>
<a class="slide inactive" href=""><img class="test" src="images/slide2.jpg" /></a>
<a class="slide inactive" href=""><img class="test" src="images/slide1.jpg" /></a>
</div>
</div>
</div>
So the main issue you were facing is that by using <img> tags your images were scaling proportionately and disappearing upwards out of view. The reason you couldnt see this was because of the margin-top:-150px that was on the outermost container <div>.
By switching to divs with background-image styles you can use the css property background-size to make sure the image stays visible (I have selected cover as the background-size attribute, but feel free to use contain instead, you will just see some of the background grey color in doing so). I have added comments to the HTML and CSS where necessary to mark important changes, and show you what i removed.
CSS
/* slider test*/
#SliderVanbuiten {
width: 100%;
max-width: 1940px;
// height: 470px;
// margin-top:-150px; // why is this here?
position: relative;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.bgslide {
background-color: black;
position: relative;
margin-top:440px;
height:30px;
z-index:5;
bottom:0;
opacity: 0.5;
}
#s1, #s2, #s3, #s4 {
padding: 6px;
background: white;
position: absolute;
left: 50%;
bottom: 10px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1 {
margin-left: -36px;
border-radius: 20px;
}
#s2 {
margin-left: -12px;
border-radius: 20px;
}
#s3 {
margin-left: 12px;
border-radius: 20px;
}
#s4 {
margin-left: 36px;
border-radius: 20px;
}
#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
opacity: .50;
}
.SliderBinnen {
width: 100%;
max-width: 1930px;
position:relative;
//height: 470px;
//position: absolute;
//top: 0;
//left: 0;
overflow: hidden;
}
.control {
display: none;
}
#Slide1:checked ~ .SliderCenter {
margin-left: 0%;
}
#Slide2:checked ~ .SliderCenter {
margin-left: -100%;
}
#Slide3:checked ~ .SliderCenter {
margin-left: -200%;
}
#Slide4:checked ~ .SliderCenter {
margin-left: -300%;
}
#Slide1:checked + #s1 {
opacity: 1;
}
#Slide2:checked + #s2 {
opacity: 1;
}
#Slide3:checked + #s3 {
opacity: 1;
}
#Slide4:checked + #s4 {
opacity: 1;
}
.SliderCenter {
width: 400%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-size:0; // fixes inline-block spacing
}
.slide {
position:relative;
width:25%;
padding-bottom:440px; // must match bgslide margin-top
height:0;
display:inline-block;
}
.slide > div {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background-size:cover;
background-position:center center;
}
HTML
<body>
<main class="home">
<div class="wallpaper1">
<div id="SliderVanbuiten">
<div class="SliderBinnen">
<input checked type="radio" name="slide" class="control" id="Slide1" />
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2" />
<label for="Slide2" id="s2"></label>
<input type="radio" name="slide" class="control" id="Slide3" />
<label for="Slide3" id="s3"></label>
<input type="radio" name="slide" class="control" id="Slide4" />
<label for="Slide4" id="s4"></label>
<div class="bgslide"></div>
<div class="SliderCenter">
<a class="slide inactive" href="">
<div class="test show" style="background-image:url('http://www.spyderonlines.com/images/wallpapers/picture/picture-10.jpg')"></div>
</a>
<a class="slide inactive" href="">
<div class="test show" style="background-image:url('http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg')"></div>
</a>
<a class="slide inactive" href="">
<div class="test" style="background-image:url('http://www.spyderonlines.com/images/wallpapers/picture/picture-10.jpg')"></div>
</a>
<a class="slide inactive" href="">
<div class="test show" style="background-image:url('http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg')"></div>
</a>
</div>
</div>
</div>
</div> <!-- missing a closing </div> -->
</main>
</body>
UPDATED JS FIDDLE
JS Fiddle
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>
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