Elegant jQuery Slideshow Plugin: Lateral Slider 

 October 30, 2019

By  Jack Fisher

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

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.

Jack Fisher


Hey - I'm Jack. I've been goofing around with code since 2002, and I've come a long way from my first Geocities site. I started Lateral Code 12 years ago and have been blogging ever since.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Subscribe to our newsletter now!