LUCiD GRAFiX Logo

Tutorial
YouTube RSS Feed
Search

TUTORIAL

Simple jQuery Slider

Written by Posted on September 3rd, 2013 1 Comment
Share This

Were going to be using the powerful JavaScript library(jQuery) to make a simple slider that will animate in the direction you click via the buttons and then resets when it gets to the end.  I have wrapped the images in a a link so you can incorporate captions in to the pictures and when they click it, it will go to the desired page.

MarkUp

The pictures used are from the pier1.com slider on there home page.

CSS

jQuery

This is a great simple jQuery slider, to learn more you can always check the jQuery api  or you could do a free class on tutsplus.com called Learn jQuery in 30 days.

Here are 2 great slider plugins http://jquery.malsup.com/cycle/ and http://bxslider.com/. These plugins should be able to handle whatever project that might come up.

And as always…

Happy Coding!

Check out the Demo! Download files!

About

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

jQuery Tip 10 Scroll To Top jQuery Tip 10 Scroll To Top
jQuery Tip 8 Tabs jQuery Tip 8 Tabs
jQuery Tip 12 Simple SlideDown Menu jQuery Tip 12 Simple SlideDown Menu
Leave a comment

One Response

  1. Hi friends, fastidious piece of writing and good urging commented here, I am genuinely
    enjoying by these.

Leave a Reply