CSS3, multiple sliders will only display 1 main image at a time - html

Question

Let me start off by stating I'm an absolute noob at webdesign and I mostly just use it for my game art portfolio. I'm somewhat familiar with HTML and CSS3 but that's where my coding skill pretty much end abrubtly.
I wanted a nice simple slider with thumbnails for my portfolio, and I found this one online and it seems to work for me for the most part.
I want to be able to duplicate this slider on my web page so I can dedicate an entire slider for each project I have and fill it with images.
However this slider doesn't allow me to do that. When I duplicate it, it only displays 1 main image corresponding to the clicked thumbnail at a time.
Here's the HTML:
<div id="project2">
<!-- Project slider -->
<div class="p-slider">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
<img src="images/content/3D/turtleneck_staf_2.jpg"/>
</label>
<img src="images/content/3D/turtleneck_staf_2.jpg"/>
<!--Lets show the second image by default on page load-->
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
<img src="images/content/3D/turtleneck_staf_1.jpg"/>
</label>
<img src="images/content/3D/turtleneck_staf_1.jpg"/>
<input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
<img src="images/content/3D/turtleneck_staf_3.jpg"/>
</label>
<img src="images/content/3D/turtleneck_staf_3.jpg"/>
<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
<img src="images/content/3D/turtleneck_staf_4.jpg"/>
</label>
<img src="images/content/3D/turtleneck_staf_4.jpg"/>
<input type="radio" name="slide_switch" id="id5"/>
<label for="id5">
<img src="images/content/3D/turtleneck_staf_5.jpg"/>
</label>
<img src="images/content/3D/turtleneck_staf_5.jpg"/>
</div>
</div>
<div id="project3">
<!-- Project slider -->
<div class="p-slider">
<input type="radio" name="slide_switch" id="id6"/>
<label for="id6">
<img src="images/content/3D/keep_it_low_poly_2.jpg"/>
</label>
<img src="images/content/3D/keep_it_low_poly_2.jpg"/>
<!--Lets show the second image by default on page load-->
<input type="radio" name="slide_switch" id="id7" checked="checked"/>
<label for="id7">
<img src="images/content/3D/keep_it_low_poly_1.jpg"/>
</label>
<img src="images/content/3D/keep_it_low_poly_1.jpg"/>
<input type="radio" name="slide_switch" id="id8"/>
<label for="id8">
<img src="images/content/3D/keep_it_low_poly_3.jpg"/>
</label>
<img src="images/content/3D/keep_it_low_poly_3.jpg"/>
<input type="radio" name="slide_switch" id="id9"/>
<label for="id9">
<img src="images/content/3D/keep_it_low_poly_4.jpg"/>
</label>
<img src="images/content/3D/keep_it_low_poly_4.jpg"/>
<input type="radio" name="slide_switch" id="id10"/>
<label for="id10">
<img src="images/content/3D/keep_it_low_poly_5.jpg"/>
</label>
<img src="images/content/3D/keep_it_low_poly_5.jpg"/>
</div>
</div>
Each slider is embedded in its own "project" div because I wanted to have each project to have a slightly different background color.
Then I ofcourse also have a CSS sheet that both sliders are linked to:
.p-slider{
width: 83%;
position: relative;
padding-top: 41.8%;
margin: 20px auto;
margin-bottom: 150px;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.content .p-slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
width:100%;
}
.p-slider input[name='slide_switch'] {
display: none;
}
.p-slider label {
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
}
.p-slider label img{
display: block;
width: 200px;
}
.p-slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
.p-slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
.p-slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
#media screen and (max-width: 800px) {
.p-slider label img{
/*display: block;*/
width: 100px;
}
}
Try to ignore the funky percentages, that's because the images I was using have a weird aspect ratio (1920 x 966), more on that below.
So that's the first problem. I have 2 sliders, and at any time when I click a thumbnail only 1 of them will display a main image. I want to be able to copy it dozens of times and have each slider display a corresponding main image.
My second problem is that fact that this slider wasn't really responsive when I found it. I partially solved it by using percentages instead of pixels, but I don't really know how to apply this to the thumbnails.
The web page needs to be able to be viewed on mobile devices aswell, thus this is an important feature.
And yes I realize that there are probably better and smarter ways of creating a responsive CSS slider, but like I said, I'm a total noob. This works for me.

Answer 1

You can't use same name "slide_switch" for all inputs. It groups them together, so only one of them could be checked. You have to use different name for every project.

Answer 2

<div class="slider-wrapper">
<ul class="s-thumbs">
<li><img src="img/thumb1.png" alt="" /><span>Image 1</span></li>
<li><img src="img/thumb2.png" alt="" /><span>Image 2</span></li>
<li><img src="img/thumb3.png" alt="" /><span>Image 3</span></li>
<li><img src="img/thumb4.png" alt="" /><span>Image 4</span></li>
<li><img src="img/thumb5.png" alt="" /><span>Image 5</span></li>
<li><img src="img/thumb6.png" alt="" /><span>Image 6</span></li>
<li><img src="img/thumb7.png" alt="" /><span>Image 7</span></li>
</ul>
</div><ul class="s-slides">
<li id="slide-1" class="slideLeft"><img src="img/slide1.png" alt="" /></li>
<li id="slide-2" class="slideRight"><img src="img/slide2.png" alt="" /></li>
<li id="slide-3" class="slideTop"><img src="img/slide3.png" alt="" /></li>
<li id="slide-4" class="slideBottom"><img src="img/slide4.png" alt="" /></li>
<li id="slide-5" class="zoomIn"><img src="img/slide5.png" alt="" /></li>
<li id="slide-6" class="zoomOut"><img src="img/slide6.png" alt="" /></li>
<li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li>
</ul>
</div>
I only give you HTML code & in this link you can check CSS code. So by using css you can make slide or you can change as you want.
Please check this link:-http://designmodo.com/slider-css3/ & https://www.sanwebe.com/2012/08/pure-css3-tutorials-examples