CSS3图片滑块，通过幻灯片的javascript导航不起作用？

Question

I've been trying to adapt the following code to integrate with my CSS3 slider (animated and timed with keyframes) however as you can't use .animate in js when using css3 animations on the same element I either have to use one or the other.

JS I've adapted for my slider

The current js works in the sense that it navigates through the slides my only issue is that it doesn't 'slide' to each slide it jumps.

I'd really like to keep the slideshow as it is and just want to update my js so that the slide transition works. I'm not great with js so I've been finding it difficult to find a solution. If anyone could give some advice or a solution to my problem it would be truly appreciated.

DEMO

JS

//grab the width and calculate left value
var item_width = $("#carousel .video-list li").outerWidth();
var left_value = item_width * (-1);

//if user clicked on prev button
$('#previous').click(function () {
//get the right position            
var left_indent = parseInt($("#carousel .video-list").css('left')) + item_width;

    //slide the item
    $("#carousel .video-list").animate({'left' : left_indent}, function () {

    //move the last item and put it as first item                
    $("#carousel .video-list li:first").before($("#carousel .video-list li:last"));

    //set the default item to correct position
    $("#carousel .video-list").css({'left' : left_value});

    });    
//cancel the link behavior            
return false;
});

//if user clicked on next button
$('#next').click(function () {

    //get the right position
    var left_indent = parseInt($("#carousel .video-list").css('left')) - item_width;

    //slide the item
    $("#carousel .video-list").animate({'left' : left_indent}, function () {

    //move the first item and put it as last item
    $("#carousel .video-list li:last").after($("#carousel .video-list li:first"));

    //set the default item to correct position
    $("#carousel .video-list").css({'left' : left_value});
    });    
//cancel the link behavior
return false;

});

Answer 1

I don't see why .animate is needed, because I have used

transition: left 1s ease;

in my CSS to achieve the same things, with a smoother animation than I got with jQuery. I tried deleting the:

//slide the item
$("#carousel .video-list").animate(...

for the left and right. I also added some text to the html divs so that you can see how it's moving better. Sorry that I couldn't get it working, but I really feel that "transition" is what you need to look into. Here's the fiddle :)

...

I think your simplest solution would be to ditch the whole CSS animate , and build your own carousel: Consider a film strip, which is a bunch of pictures lined up next to each other. Now consider a paper with a box cut-out, the size of one picture. We put the strip behind the paper, and see only one image. If we move the strip, we can change which image we see.

The film strip will be a div with { display: inline-block; } property, containing each of the videos. The box cut-out will be a div with { overflow: hidden } property. To move the strip, we simply use $('#strip').css({'left': positionofstripleft - widthofbox }) in our javascript. And for the animation, a simple setInterval(Nextfunction, 65000) to do what clicking next would do every 65 seconds.

Finally, a CSS transition will make the movements actually animated.