Geek Answers Handbook

Add animation to this slider

I created a slider using CSS3 to display my reviews. Now I need to add animation to this slider using jQuery. But I don’t know how to use jQuery with this slider .. and why is this a suitable plugin. So can anyone tell me how to add animation to this slider?

Any ideas are welcome.

Thanks.

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

+6
source share
3 answers

I think it will be very difficult to find a plugin that exactly matches your code. But I could write you jQuery stuff. But then I would have two questions.

  • How much of CSS can I change? Or should it also work without js activation?
  • Are you left with 3 points in the future? Or do you want to dynamically change the number of slides?

// EDIT

OK, it works now. I know this is not very elegant, but I did not want to change too much code. So I just had to edit two of your css selectors (I commented out the old one). You also want to note that with this solution, your old method still works when javascript is disabled. 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 this helps.

PS: For a cleaner solution, you have to rethink a bit. One method is to put all the sliders in a shell and simply transfer that shell instead of moving it.

+1
source

There is literally documentation in the script file that has options that 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 calling the slider on your element (you did not specify the script code, so I can’t edit it).

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

More articles:


All Articles