H3ll0 H3ll0 - 20 days ago 10
CSS Question

Why does first slideshow image click skip transition and go straight to image?

In the slideshow shown below, there are two images available. Once clicking on a button for the second image after first opening my page, there is a sudden jump to that image with no 5 second transition as expected. Also when doing this, I notice that

#slideshowimage-2
is shown in the url (doing this offline) after clicking the button for that image. Here's the code below:

CSS:

.slideshowcontainer {
width:800px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
text-align:center;
overflow:hidden;
position:relative;
top:30px;
border-style:solid;
border-width:10px;
border-color:white;
border-radius:15px;
}


.imagecontainer {
width:1800px;
height:400px;
clear: both;
position:relative;
-webkit-transition:left 3s;
-moz-transition:left 3s;
-o-transition:left 3s;
-ms-transition:left 3s;
transition:left 3s;
animation:scroller 16s infinite;
}


@keyframes scroller {
0% {transform:translateX(0);}
31.25% {transform:translateX(0);}
50% {transform:translateX(-800px);}
81.25% {transform:translateX(-800px);}
100% {transform:translateX(0);}
}


.slideshowimage {
float:left;
margin:0px;
padding:0px;
position:relative;
}


@keyframes change {
0% {
transform: translateX(-800px);
}
100% {
transform: translateX(0);
animation: scroller 16s infinite;
}
}

@keyframes change2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-800px);
animation: scroller2 16s infinite;
}
}



#slideshowimage-1:target ~ .imagecontainer {
animation: none;
transform: translateX(0px);
animation: change 3s forwards;
}

#slideshowimage-2:target ~ .imagecontainer {
animation: none;
transform: translateX(-800px);
animation: change2 3s forwards;
}


.buttoncontainer {
position:relative;
top:-20px;
}


.button {
display:inline-block;
height:10px;
width:10px;
border-radius:10px;
background-color:darkgray;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
-o-transition:background-color 0.25s;
-ms-transition:background-color 0.25s;
transition:background-color 0.25s;
}


.button:hover {
background-color:gray;
}


HTML:

<div class="slideshowcontainer">
<span id="slideshowimage-1"></span>
<span id="slideshowimage-2"></span>
<span id="slideshowimage-3"></span>
<div class="imagecontainer">
<a href="#"><img src="WebServiceSlide.png" class="slideshowimage" style="width:800px;height:400px;"></a>
<a href="#"><img src="es-flag.png" class="slideshowimage" style="width:800px;height:400px;"></a>
</div>
<div class="buttoncontainer">
<a href="#slideshowimage-1" class="button"></a>
<a href="#slideshowimage-2" class="button"></a>
</div>
</div>


How could I make it so that the transition set upon clicking a button occurs on the first click? Many thanks in advance.

Answer

Reason:-

Because the left and translateX both are different. If you apply left:-800px when slide is at translateX(-800px) (2nd slide) then animation will continue at the 2nd part of slideshow. Thats why you are seeing a blank white space(when translateX(-800px) accors when it is already left:-800px).

Solution:-

You either have to use translateX or left. use the same in all the places

Part of code that solved the problem:-

@keyframes change {
    0% {
        transform: translateX(-800px);
    }
    100% {
        transform: translateX(0);
        animation: scroller 16s infinite;
    }
}

@keyframes change2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-800px);
        animation: scroller2 16s infinite;
    }
}

#slideshowimage-1:target ~ .imagecontainer {
    animation: none;
    transform: translateX(0px);
    animation: change 3s forwards;
}

#slideshowimage-2:target ~ .imagecontainer {
    animation: none;
    transform: translateX(-800px);
    animation: change2 3s forwards;
}

Explanation:-

This code doesn't do translateX manually. Instead it uses animation to scoll single time by animation: change 3s forwards;

Drawback:-

Once we click on the slide selection button the animation stops. I have even tried it to solve by adding animation in the change keyframes animate end section. But unfortunately it didn't work. So I would suggest an alternate method to overcome the drawback as follows

To overcome the drawback I have added a play button which will replay the slideshow animation which got paused by the slide button. (Once we click on play button it takes a little time to slide as we have given 16s in animation)

DEMO:-

.slideshowcontainer {
    width: 800px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center;
    overflow: hidden;
    position: relative;
    top: 30px;
    border-style: solid;
    border-width: 10px;
    border-color: white;
    border-radius: 15px;
}

.imagecontainer {
    width: 1800px;
    height: 400px;
    clear: both;
    position: relative;
    -webkit-transition: all 3s;
    -moz-transition: all 3s;
    -o-transition: all 3s;
    -ms-transition: all 3s;
    transition: all 3s;
    transform: translateX(0px);
    animation: scroller 16s infinite;
}

@keyframes scroller {
    0% {
        transform: translateX(0);
    }
    31.25% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-800px);
    }
    81.25% {
        transform: translateX(-800px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes scroller2 {
    0% {
        transform: translateX(-800px);
    }
    31.25% {
        transform: translateX(-800px);
    }
    50% {
        transform: translateX(0);
    }
    81.25% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-800px);
    }
}


@keyframes change {
    0% {
        transform: translateX(-800px);
    }
    100% {
        transform: translateX(0);
        animation: scroller 16s infinite;
    }
}

@keyframes change2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-800px);
        animation: scroller2 16s infinite;
    }
}

.slideshowimage {
    float: left;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#slideshowimage-1:target ~ .imagecontainer {
    animation: none;
    transform: translateX(0px);
    animation: change 3s forwards;
}

#slideshowimage-2:target ~ .imagecontainer {
    animation: none;
    transform: translateX(-800px);
    animation: change2 3s forwards;
}

#slideshowimage-3:target ~ .imagecontainer {
    transform: translateX(0);
    animation: scroller 16s infinite;
}

.buttoncontainer {
    position: relative;
    top: -20px;
}

.button {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background-color: darkgray;
    -webkit-transition: background-color 0.25s;
    -moz-transition: background-color 0.25s;
    -o-transition: background-color 0.25s;
    -ms-transition: background-color 0.25s;
    transition: background-color 0.25s;
}

.button:hover {
    background-color: gray;
}

.buttonplay:after {
    height: 0;
    width: 0;
    top: 0;
    margin-left: 10px;
    position: absolute;
    content: ' ';
    border-left: solid 13px darkgray;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    }
<div class="slideshowcontainer">
    <span id="slideshowimage-1"></span>
    <span id="slideshowimage-2"></span>
    <span id="slideshowimage-3"></span>
        <div class="imagecontainer">
            <a href="#"><img src="https://placehold.it/800x400" class="slideshowimage" style="width:800px;height:400px;"></a>
            <a href="#"><img src="https://placehold.it/900x450" class="slideshowimage" style="width:800px;height:400px;"></a>
        </div>
        <div class="buttoncontainer">
            <a href="#slideshowimage-1" class="button"></a>
            <a href="#slideshowimage-2" class="button"></a>
            <a href="#slideshowimage-3" class="buttonplay"></a>
        </div>
    </div>