Line 187 Change your css for

input.sp-selector-4:checked~.sp-content .sp-slider ~  {
    left: -300%;
}

to:

input.sp-selector-4:checked~.sp-content .sp-slider  {
    left: -300%;
}

There is an extra ~

My slideshow seems to have a problem where the 4th button is not acting correctly,

Here’s the JSFiddle:

https://jsfiddle.net/14yme7va/1/

Click the Radio Buttons beneath the image to transition between the images.

Click the second one – works.

Third – works.

Click on the fourth radio button… it goes to the FIRST.

Click on the fifth… works.

I’ve looked this over many times and everything seems to be correct.. Obviously I’m missing something though.

Why is the fourth radio button sliding to the first image and how do I get it to transition properly like all the others?

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%;
}