WebDesign&Such

Recently I was put in charge of creating a product slider for a client’s website. There would be four products shown at a time, with one new product being revealed each time as the slider moved from the right to the left. I figured there was a jQuery slider out there that I could manipulate for this, and after a little hunting I found one.

The actual slider and website I created it for isn’t live yet. I used the base slider I created and used a few Apple images to show the general idea in the demo. So check out the demo, and then keep reading to see the details.

View Demo

So the original code for this slider is jCarousel. I figured I would put up this demo to show how with a few modifications to the code you can create a useful product slider. You’ll notice how it’s created with an unordered list. I also showed how you can use rollover effects, and link each image to a webpage; which is obviously the point of the slider in the first place.

The slider has an autoplay feature. I added some code to the original jCarousel to make the slider go only one product at a time. This is in the head of the index.html file. The line “scroll: 1“. If you want it to scroll 2 items, change it to 2, and so on.

Now I admit the code here isn’t the prettiest, but as I mentioned this was created strictly for the demo, to show some of the possibilities. I’m going to provide all these files in a .zip file for download, in case you want to play around with the slider. Enjoy!

Download the Files