У моего слайд-шоу, похоже, проблема в том, что 4-я кнопка работает неправильно,
Вот JSFiddle:
https://jsfiddle.net/14yme7va/1/
Нажмите радио-кнопки под изображением для перехода между изображениями.
Нажмите второе - работает.
Третье - работает.
Нажмите на четвертое радио-кнопку .. ... это идет к ПЕРВОМУ.
Нажмите на пятый ... работает.
Я много раз просматривал это, и все кажется правильным .. Очевидно, я что-то упустил хотя.
Почему четвертая кнопка переключается на первое изображение и как заставить его правильно переходить, как и все остальные?
HTML:
<div class="containbox">
<div class="leftbox">
</div>
<div class="rightbox">
<div class="sp-slideshow">
<input checked="checked" class="sp-selector-1" id="button-1" name="radio-set" type="radio">
<input class="sp-selector-2" id="button-2" name="radio-set" type="radio">
<input class="sp-selector-3" id="button-3" name="radio-set" type="radio">
<input class="sp-selector-4" id="button-4" name="radio-set" type="radio">
<input class="sp-selector-5" id="button-5" name="radio-set" type="radio">
<div class="sp-content">
<div class="sp-parallax-bg"></div>
<ul class="sp-slider clearfix">
<li><img alt="image01" src="https://via.placeholder.com/370"></li>
<li><img alt="image02" src="https://via.placeholder.com/370"></li>
<li><img alt="image03" src="https://via.placeholder.com/370"></li>
<li><img alt="image04" src="https://via.placeholder.com/370"></li>
<li><img alt="image05" src="https://via.placeholder.com/370"></li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.sp-slideshow {
position: relative;
margin: 4em 6rem 4em 4rem;
padding: 0em 0em 0em 0em;
height: 460px;
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.82);
}
.sp-content {
position: relative;
width: 100%;
height: 100%;
background-image: radial-gradient(circle at top, rgba(48, 60, 62, 0.67), rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.73), rgba(0, 0, 0, 0.66));
background-size: cover;
overflow: hidden;
}
.sp-content::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #202020, #202020);
opacity: .6;
}
.sp-parallax-bg {
background: #2e2b2a40 repeat-x scroll 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.sp-slideshow input {
position: absolute;
bottom: 15px;
left: 50%;
width: 9px;
height: 9px;
z-index: 1001;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 1;
}
.sp-slideshow input+label {
position: absolute;
bottom: 15px;
width: 10px;
height: 10px;
display: block;
z-index: 1000;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.sp-slideshow input:checked~.sp-content {
-webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
-moz-transition: background-position linear 0.6s, background-color linear 0.8s;
-o-transition: background-position linear 0.6s, background-color linear 0.8s;
-ms-transition: background-position linear 0.6s, background-color linear 0.8s;
transition: background-position linear 0.6s, background-color linear 0.8s;
}
.sp-slideshow input:checked~.sp-content .sp-parallax-bg {
-webkit-transition: background-position linear 0.7s;
-moz-transition: background-position linear 0.7s;
-o-transition: background-position linear 0.7s;
-ms-transition: background-position linear 0.7s;
transition: background-position linear 0.7s;
}
.sp-selector-1,
.button-label-1 {
margin-left: -36px;
}
.sp-selector-2,
.button-label-2 {
margin-left: -18px;
}
.sp-selector-3,
.button-label-3 {
margin-left: 0px;
}
.sp-selector-4,
.button-label-4 {
margin-left: 18px;
}
.sp-selector-5,
.button-label-5 {
margin-left: 36px;
}
.sp-selector-6,
.button-label-6 {
margin-left: 54px;
}
.sp-selector-7,
.button-label-7 {
margin-left: 72px;
}
.sp-selector-1:checked~.sp-arrow.sp-a2,
.sp-selector-2:checked~.sp-arrow.sp-a3,
.sp-selector-3:checked~.sp-arrow.sp-a4,
.sp-selector-4:checked~.sp-arrow.sp-a5,
.sp-selector-5:checked~.sp-arrow.sp-a6,
.sp-selector-6:checked~.sp-arrow.sp-a7 {
right: 15px;
display: block;
background-position: top right;
}
.sp-selector-2:checked~.sp-arrow.sp-a1,
.sp-selector-3:checked~.sp-arrow.sp-a2,
.sp-selector-4:checked~.sp-arrow.sp-a3,
.sp-selector-5:checked~.sp-arrow.sp-a4,
.sp-selector-6:checked~.sp-arrow.sp-a5,
.sp-selector-7:checked~.sp-arrow.sp-a6 {
left: 15px;
display: block;
background-position: top left;
}
input.sp-selector-1:checked~.sp-content .sp-parallax-bg {
background-position: 0 0;
}
input.sp-selector-2:checked~.sp-content .sp-parallax-bg {
background-position: -200px 0;
}
input.sp-selector-3:checked~.sp-content .sp-parallax-bg {
background-position: -400px 0;
}
input.sp-selector-4:checked~.sp-content .sp-parallax-bg {
background-position: -600px 0;
}
input.sp-selector-5:checked~.sp-content .sp-parallax-bg {
background-position: -800px 0;
}
input.sp-selector-6:checked~.sp-content .sp-parallax-bg {
background-position: -1000px 0;
}
input.sp-selector-7:checked~.sp-content .sp-parallax-bg {
background-position: -1200px 0;
}
input.sp-selector-1:checked~.sp-content .sp-slider {
left: 0;
}
input.sp-selector-2:checked~.sp-content .sp-slider {
left: -100%;
}
input.sp-selector-3:checked~.sp-content .sp-slider {
left: -200%;
}
input.sp-selector-4:checked~.sp-content .sp-slider ~ {
left: -300%;
}
input.sp-selector-5:checked~.sp-content .sp-slider {
left: -400%;
}
input.sp-selector-6:checked~.sp-content .sp-slider {
left: -500%;
}
input.sp-selector-7:checked~.sp-content .sp-slider {
left: -600%;
}
input.sp-selector-1:checked~.sp-content .sp-slider>li:first-child,
input.sp-selector-2:checked~.sp-content .sp-slider>li:nth-child(2),
input.sp-selector-3:checked~.sp-content .sp-slider>li:nth-child(3),
input.sp-selector-4:checked~.sp-content .sp-slider>li:nth-child(4),
input.sp-selector-5:checked~.sp-content .sp-slider>li:nth-child(5),
input.sp-selector-6:checked~.sp-content .sp-slider>li:nth-child(6),
input.sp-selector-7:checked~.sp-content .sp-slider>li:nth-child(7) {
opacity: 1;
}
.containbox{display:table;width:100%; height:100%;}
.rightbox {
display:table-cell;
vertical-align:middle; width:75%; text-align:center; }
.leftbox {
display:table-cell;
vertical-align:middle; width:25%; text-align:center; }
.thumbnailimage {
padding: 0rem 1rem 1rem 0rem;
}
.sp-slider {
position: relative;
left: 0;
width: 700%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
-webkit-transition: left ease-in 0.8s;
-moz-transition: left ease-in 0.8s;
-o-transition: left ease-in 0.8s;
-ms-transition: left ease-in 0.8s;
transition: left ease-in 0.8s;
}
.sp-slider>li {
color: #fff;
width: 14.28%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding: 0px 0px 0px 0.8%;
float: left;
text-align: center;
opacity: 0.9;
-webkit-transition: opacity ease-in 0.4s 0.8s;
-moz-transition: opacity ease-in 0.4s 0.8s;
-o-transition: opacity ease-in 0.4s 0.8s;
-ms-transition: opacity ease-in 0.4s 0.8s;
transition: opacity ease-in 0.4s 0.8s;
}
.sp-slider>li img {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: block;
margin: 0 auto;
padding: 40px 0 50px 0;
max-height: 100%;
max-width: 100%;
}