How to make the slider move right and left alternatively

Question

The slider i have is moving from to left side automatically and once it reaches it moves the first slider and then it repeats.

All i wanted to do is to make the slider right to left and then to left to right alternatively.

How can i do this ?

Here is my Fiddle .

Here is the css

#slideshow {
position: relative;
width: 640px;
height: 310px;
padding: 15px;
border: 1px solid #ddd;
margin: 0 auto 2em;
background: #FFF;
background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);

-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;

-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    }

As i don't have any idea in javascript i am not able to have any steps.

Answer 1

Your current animation keyframes:

@-webkit-keyframes slider {
    0%, 20%, 100%   { left: 0 }
    25%, 45%        { left: -100% }
    50%, 70%        { left: -200% }
    75%, 95%        { left: -300% }
}

it goes from 0 to -100% to -200% .. -300% and than back to 0.

you can change it to something like this:

@-webkit-keyframes slider {
    0%, 20%, 100%   { left: 0 }
    25%, 45%        { left: -100% }
    50%, 70%        { left: 0 }
    75%, 95%        { left: -100% }
}

here it will just got back and forth between 0 and -100%.

Add classes to your slides to be able to hide and show them and created these keyframes to do so:

@-webkit-keyframes slider1 {
    0%, 20%, 100%   { opacity: 1; display: block; visibility: visible; }
    25%, 45%        { opacity: 0; display: none; visibility: hidden; }
    50%, 70%        { opacity: 0; display: none; visibility: hidden; }
    75%, 95%        { opacity: 0; display: none; visibility: hidden; }
}

@-webkit-keyframes slider2 {
    0%, 20%, 100%   { opacity: 0; display: none; visibility: hidden; }
    25%, 45%        { opacity: 1; display: block; visibility: visible; }
    50%, 70%        { opacity: 0; display: none; visibility: hidden; }
    75%, 95%        { opacity: 0; display: none; visibility: hidden; }
}

@-webkit-keyframes slider3 {
    0%, 20%, 100%   { opacity: 0; display: none; visibility: hidden; }
    25%, 45%        { opacity: 0; display: none; visibility: hidden; }
    50%, 70%        { opacity: 1; display: block; visibility: visible; }
    75%, 95%        { opacity: 0; display: none; visibility: hidden; }
}

@-webkit-keyframes slider4 {
    0%, 20%, 100%   { opacity: 0; display: none; visibility: hidden; }
    25%, 45%        { opacity: 0; display: none; visibility: hidden; }
    50%, 70%        { opacity: 0; display: none; visibility: hidden; }
    75%, 95%        { opacity: 1; display: block; visibility: visible; }
}

now you just need to position slide 3 where 1 is and 4 where 2 is, since you have a fixed width i just used position: relative; and add the animation keyframes (don't forget the other prefixes)

#slideshow .slide_1 {
    -webkit-animation: slider1 32s infinite; 
}
#slideshow .slide_2 {
    -webkit-animation: slider2 32s infinite; 
}
#slideshow .slide_3 {
    position: relative;
    left: -1280px;
    -webkit-animation: slider3 32s infinite;   
}
#slideshow .slide_4 {
    position: relative;
    left: -1280px;
    -webkit-animation: slider4 32s infinite;   
}

the finished Fiddle