Jquery slider in reverse order -
this code of jquery image slider
$(".slider > div:gt(0)").hide(); function slideloop() { $('.slider > div:first') .next() .show() .end() .appendto('.slider'); } slideloop(); setinterval(slideloop, 3000); $('.right').click( slideloop )
i'm making control buttons. slide right works. how make slide left function?
thanks in advance.
try this...
html code
<div id="img-grp-wrap"> <div class="img-wrap"> <img src="http://www.pictures-of-cats.org/images/ragdoll-cat-small-pictures-of-cats.jpg" /> <img src="http://0.tqn.com/d/paganwiccan/1/g/t/1/-/-/blackcat.jpg" /> <img src="http://2.bp.blogspot.com/-h_ityn3qqok/tfp5ak2vi5i/aaaaaaaaabm/qm45bnom4hy/s1600/cat-claw.jpg" /> <img src="http://www.pictures-of-cats.org/images/pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" /> </div> <img src="http://annhowardesign.com/images/arrowright.jpg" class="next" alt="next"/> <img src="http://annhowardesign.com/images/arrowleft.jpg" class="prev" alt="previous"/> </div>
css...
#img-grp-wrap { position: relative; width: 180px; height: 180px; margin: 100px auto; } .img-wrap { position: relative; border: 1px solid #ccc; width: 180px; height: 180px; } .img-wrap img { position: absolute; top: 0; left: 0; -moz-box-shadow: 1px 1px 4px #ccc; padding: 10px; } .next, .prev { position: absolute; cursor: pointer; top: 70px; } .next { right: -40px; } .prev { left: -40px; }
jquery...
$('.img-wrap img:gt(0)').hide(); $('.next').click(function() { $('.img-wrap img:first-child').fadeout().next().fadein().end().appendto('.img-wrap'); }); $('.prev').click(function() { $('.img-wrap img:first-child').fadeout(); $('.img-wrap img:last-child').prependto('.img-wrap').fadeout(); $('.img-wrap img:first-child').fadein(); });
finally working fiddle is.... http://jsfiddle.net/b4t7m/
if need setinterval... http://jsfiddle.net/bh6ay/
enjoy coding....!!!
Comments
Post a Comment