Jak zablokować slider, żeby po kliknięciu w zdjęcie poza nim nie wracał do pierwotnej pozycji?

Jestem w trakcie tworzenia layoutu na ebay. Chciałabym, żeby składał się z kilku sliderów, z których każdy będzie zawierał zdjęcia innego sprzedawanego modelu. Na czym polega mój problem: jeśli w pierwszym sliderze ustawione jest inne niż pierwsze zdjęcie, to po kliknięciu w miniaturkę na kolejnym sliderze ten pierwszy powraca do pierwotnej pozycji, w skutek czego przez ułamek sekundy na monitorze pojawia się totalny chaos. Moje pytanie: Czy istnieje jakiś sposób, żeby zablokowac pierwszy slider w takiej pozycji jaką wskazało się przed kliknięcie w drugi? Wybaczcie proszę niefachowy język, ale jestem totalnym samoukiem, a moja nauka polegała głównie na próbach i błędach. Wklejam fragment kodu:

#slider-wrapper{width: 1024px; height: 650px; margin: 0px auto; position: relative; margin-bottom: 0px;}

#s1{
width: 166px;
height: 166px;
background: url('http://www.xxxxxxxxxxxxx.jpg');
background-size: 166px 166px;
border: solid 1px #fff;
position: absolute;
left:5px;
top: 30px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s2{
width: 166px;
height: 119px;
background: url('http://www.xxxxxxxxxxxxx.jpg');
background-size: 166px 119px;
border: solid 1px #fff;
position: absolute;
top: 230px;
left:5px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s3{
width: 166px;
height: 119px;
background: url('http://www.xxxxxxxxxxxxxxxx.jpg');
background-size: 166px 119px;
border: solid 1px #fff;
position: absolute;
top: 381px;
left:5px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s4{
width: 166px;
height: 166px;
background: url('http://www.xxxxxxxxxxx.jpg');
background-size: 166px 166px;
border: solid 1px #fff;
position: absolute;
top: 30px;
left:853px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s5{
width: 166px;
height: 119px;
background: url('http://www.xxxxxxxxxxxx.jpg');
background-size: 166px 119px;
border: solid 1px #fff;
position: absolute;
top: 230px;
left:853px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s6{
width: 166px;
height: 119px;
background: url('http://xxxxxxxxxxxjpg');
background-size: 166px 119px;
border: solid 1px #fff;
position: absolute;
top: 381px;
left:853px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1:hover, #s2:hover, #s3:hover, #s4:hover, #s5:hover, #s6:hover { opacity: 1;}
.inner-wrapper{
width: 1024px;
height: 650px;
position: absolute;
margin-bottom: 0px;
overflow: hidden;
}
.control{ display: none;}
#Slide1:checked ~ .overflow-wrapper{ margin-left: 0%; }
#Slide2:checked ~ .overflow-wrapper{ margin-left: -100%; }
#Slide3:checked ~ .overflow-wrapper{ margin-left: -200%; }
#Slide4:checked ~ .overflow-wrapper{ margin-left: -300%; }
#Slide5:checked ~ .overflow-wrapper{ margin-left: -400%; }
#Slide6:checked ~ .overflow-wrapper{ margin-left: -500%; }
#Slide1:checked + #s1 { opacity: 1; }
#Slide2:checked + #s2 { opacity: 1; }
#Slide3:checked + #s3 { opacity: 1; }
#Slide4:checked + #s4 { opacity: 1; }
#Slide5:checked + #s5 { opacity: 1; }
#Slide6:checked + #s6 { opacity: 1; }
.overflow-wrapper{
width: 700%;
height: 650px;
position: absolute;
top: 60px;
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 {
height: 652px;
display: block;
background: url('http://xxxxxxxxxxxxxxx.jpg') no-repeat;
background-size: 652px 652px;
margin-left: 186px;
margin-top: -80px;
}
.slide2 {
height: 652px;
display: block;
background: url('http://www.xxxxxxxxxxxxxxxxxx.jpg') no-repeat;
background-size: 652px 468px;
margin-left: 1210px;
margin-top: -600px;
}
.slide3 {
height: 652px;
display: block;
background: url('http://xxxxxxxxxxxxxxx.jpg') no-repeat;
background-size: 652px 468px;
margin-left: 2235px;
margin-top: -650px;
}
.slide4 {
height: 652px;
display: block;
background: url('http://xxxxxxxxxxxxxxxxxxxxxx.jpg') no-repeat;
background-size: 550px 550px;
margin-left: 3300px;
margin-top: -680px;
}
.slide5 {
height: 652px;
display: block;
background: url('http://www.xxxxxxxxxxxxx.jpg') no-repeat top;
background-size: 652px 468px;
margin-left: 2050px;
margin-top: -625px;
}
.slide6 {
height: 652px;
display: block;
background: url('http://www.xxxxxxxxxxxxxx.jpg') no-repeat top;
background-size: 652px 468px;
margin-left: 4100px;
margin-top: -650px;
}

<div id="slider-wrapper">
<div class="inner-wrapper">
<input 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>
<input type="radio" name="slide" class="control" id="Slide5">
<label for="Slide5" id="s5"></label>
<input type="radio" name="slide" class="control" id="Slide6">
<label for="Slide6" id="s6"></label>
<div class="overflow-wrapper">
<a class="slide" href=""></a>
<a class="slide2" href=""></a>
<a class="slide3" href=""></a>
<a class="slide4" href=""></a>
<a class="slide5" href=""></a>
<a class="slide6" href=""></a>

Kolejne slidery będą kopią tego co wkleiłam ze zmienionymi cyferkami.

Liczę na pomoc i zastrzegam, że jak to u kobiety hejty mogą skutkować płaczem. ;)