1

I have a pure CSS3 slideshow of 4 videos which work fine. I'm using the following code to navigate through the slideshow however because I'm telling it to go left or right 25% when the animation of the slideshow resumes it thinks that there are slides that need to be displayed based on the number of times you click 'next'.

For example, if i have clicked next through 2 slides then as soon as the slideshow resumes instead of going back to the first slide it shows 2 blank slides.

I'm struggling to find a solution to linking the two so that you can navigate through the slides but also so it knows the current position in the keyframes.

If anyone could point me in the right direction i would be so grateful.

CSS

#carousel {
   width: 100%;
   overflow: hidden;
}

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

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

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

#carousel .video-list, #descriptionCarousel .description-list {
    position: relative;
    width: 400%;
    height: 100%;
    left: 0; 
    top: 0;
    bottom: 0;
    animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -webkit-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -moz-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -o-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -ms-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite; 
    animation-delay: 4.6s;
    -webkit-animation-delay: 4.6s;
    -moz-animation-delay: 4.6s;
    -ms-animation-delay: 4.6s;
    -webkit-transition: -webkit-transform 1s cubic-bezier(.93,.11,.32,.94);
    transition: -transform 1s cubic-bezier(.93,.11,.32,.94);
}

#carousel .video-list li, #descriptionCarousel .description-list li  {
    position: relative;
    width: 25%;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    float: left;
}

JS 

$(function () {
var position = 0;
$('#next').on('click', function (e) {
e.preventDefault();

position = (position - 25) % 100;

$('#carousel .video-list').css('-webkit-transform', 'translateX(' + position + '%)');
$(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", 
"-webkit-animation-play-state": "paused"});

});

$('#previous').on('click', function (e) {
e.preventDefault();

position = (position + 25) % 100;
position = (position > 0) ? -75 : position;

$('#carousel .video-list, #descriptionCarousel .description-list').css('-webkit-
transform', 'translateX(' + position + '%)');
$(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", 
"-webkit-animation-play-state": "paused"});
});

});
user2498890
  • 1,528
  • 4
  • 25
  • 58
  • I don't believe there's any way for JS to know where CSS is in an animation, until it reaches the very end. One compromise might be to string together multiple CSS animations using JS, so you'd know which partial animations have completed. – Blazemonger Mar 17 '14 at 13:37
  • Ok so at the moment the set up is like this http://jsfiddle.net/D5Qcw/9/ - just so you can see how it leaves a blank slide. How would I go about stringing multiple CSS animations together? Really sorry I'm blank on how to go about fixing this. Many thanks. – user2498890 Mar 17 '14 at 13:49
  • Use [this technique](http://stackoverflow.com/questions/2794148/css3-transition-events) to know when one CSS animation ends and to trigger the next one; at the same time, set a Boolean variable or increment a counter so you know which partial animations are completed. – Blazemonger Mar 17 '14 at 13:50
  • So at the moment it thinks that is still has 2 slides to display would I be able to use this technique to make it think that the animation has ended and to go back to the beginning? Or am I right in thinking that this only works when the animation has ended? – user2498890 Mar 17 '14 at 13:55
  • Yes, AFAIK you can only use JS to detect when a CSS animation is completely ended. – Blazemonger Mar 17 '14 at 14:30
  • Ok I'm trying to get my head around how I would apply this but thanks for your help anyway. – user2498890 Mar 17 '14 at 14:45

0 Answers0