Elegant jQuery Slideshow Plugin: Lateral Slider

By Karthik Viswanathan

Let’s start with the defintion:

Slider – The easiest known way to showcase your images and photos on the web in style.

Who can deny it? This is the generation of web 2.0 sliders. A few JavaScript files, some CSS, and a bit of markup is all you need to generate an elegant showcase of your images. Best part? 99% of it is done for you.

Well, that’s the ideal situation. Unfortunately, it’s often times much more complicated. That’s why I created Lateral Slider.

View the DemoPurchase it from CodeCanyon

Lateral Slider is a jQuery slideshow plugin that I recently released on CodeCanyon. How does it work? Simple.

1. Include the CSS/JavaScript

CSS:

<link rel="stylesheet" href="slider.css" type="text/css" media="screen" />

JavaScript:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Lateral Slider -->
<script src="slider.jquery.js"></script>

2. Write the Markup

All you’ll need is a div and a few images:

<div id="slider">
	<img src="image1.jpg" alt="Image 1" />
	<img src="image2.jpg" alt="Image 2" />
	<img src="image3.jpg" alt="Image 3" />
</div>

3. Activate Lateral Slider

<!-- no need for type="text/javascript" in HTML 5 -->
<script>$( '#slider' ).lateralSlider();</script>

4. Celebrate

Lateral Slider is ready to be displayed.

5. Oops, was there supposed to be a fifth step?

Nope. You’re done.

Features

Simple setup is great, but I’m sure you’re also looking for features. Fear not:

• 13 different transitions
• Support for all major browsers (including IE6)
• Image linking
• Many configurable options
• Controls (forward, back, pick a slide)
• Comprehensive documentation
• Much more…

Want to know more? Check out the description at CodeCanyon. Better yet, why don’t you take a look at the live preview and see Lateral Slider for yourself.

Purchase It!

Interested? It’s only $10. Why not purchase it from CodeCanyon?

Tags: javascript

This entry was posted on Thursday, July 8th, 2010 at 19:44:57. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

• RSS
• Tweet this!
• Delicious
• Facebook
• DFloat
• DMoo
• E-mail