Adding animation to this testimonial slider

Question

I have created a slider using CSS3 to display my testimonials.. Now I need to add some animation to this slider using Jquery. But I dont have any idea how to use Jquery with this slider.. and what are the suitable plugin for this. So anybody can tell me How can I add an animation to this slider?

any ideas are greatly appreciated.

Thank you.

Here is a link to the slider code: jsfiddle.net/XJVYj/82

Answer 1

I think it will be very hard to find a Plugin that exactly matches your code. But I could code you the jQuery stuff for it. But then I would have two Questions.

1. How much of the CSS can I change? Or should it also still work without js activated?
2. Are you staying with a number of 3 items in the future? Or do you want to change the number of slides dynamically?

// EDIT

OK it works now. I know its not very elegant, but I dont wanted to change too much of your code. So I just had to edit two of your css selectors (I commented the old one out). You also wanna notice, that with this solution your old method still works when javascript is disabled. The jQuery Code follows...

$("div.one").css({"left":0, "opacity":1});
$("div.two").css({"left":300, "opacity":1});
$("div.three").css({"left":600, "opacity":1});

$("input#first").click(function(){
    $("div.one").animate({left:0},600);
    $("div.two").animate({left:300},600);
    $("div.three").animate({left:600},600);
});

$("input#second").click(function(){
    $("div.one").animate({left:-300},600);
    $("div.two").animate({left:0},600);
    $("div.three").animate({left:300},600);
});

$("input#third").click(function(){
    $("div.one").animate({left:-600},600);
    $("div.two").animate({left:-300},600);
    $("div.three").animate({left:0},600);
});​

jsfiddle.net/mYhEV/2/

Hope it helps.

PS: For a cleaner solution you would have to rethink a bit. One method would be to put all the sliders in a wrapper and just moving this wrapper instead of moving.

Answer 2

Try Using these:

1. Flex Slider
2. Timelinr
3. SmartGallery
4. Skitter

Answer 3

There is documentation literally right in the script file which has options you can use:

$.tiny.carousel = {
        options: {  
            start: 1, // where should the carousel start?
            display: 1, // how many blocks do you want to move at 1 time?
            axis: 'x', // vertical or horizontal scroller? ( x || y ).
            controls: true, // show left and right navigation buttons.
            pager: false, // is there a page number navigation present?
            interval: false, // move to another block on intervals.
            intervaltime: 3000, // interval time in milliseconds.
            rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached.
            animation: true, // false is instant, true is animate.
            duration: 1000, // how fast must the animation move in ms?
            callback: null // function that executes after every move.
        }
    };

Secifcally: animation: true, // false is instant, true is animate .

Try setting the animation to true when you call the slider on your element (you provided no script code so I can't edit it for you.)

$('YOUR_SLIDERr').tinycarousel({ animation: true });​