New Blog Address: http://blog.grayjunior.com/

JQuery & CSS3 Slideshow

Sliding-Gallery With JQuery and CSS By Gray Junior
You probably have seen a slideshow appearing at many blogs or website, that actually served to help promoting featured products, discounts, etc. In this article, I will be sharing with you a simple slideshow that makes use of JQuery and CSS 3, with various customization for you. This current version features a simple “next” and “previous” link to preview the slides. As the name suggests, each slide is presented in a sliding motion upwards and downwards. For other purposes or usage that requires a small description, I have also included a small section for each slide where you may add in texts.

To initialize the slideshow script, just insert this codes into your page:

Initializing The Slideshow

$(document).ready(function() {

$(‘#main’).slider({ // SELECT YOUR CONTAINER/ELEMENT TO USE FOR THE SLIDESHOW

speed: 1500, // SPEED OF THE SLIDING ANIMATION

actions: false, // TO TOGGLE FOR INITIAL DISPLAY OF THE “NEXT” AND “PREVIOUS” LINKS

width: 900, // THE WIDTH OF THE SLIDESHOW

height: 500 // THE HEIGHT OF THE SLIDESHOW

});

});

You may customize your slideshow with the various options stated above, speed of the slides, display of the action links and the size of the slideshow you want. This script has been tested on the major browsers (firefox, safari, chrome) and I have also debugged most of the issues. Should you encounter any problems with it, do leave me a message or e-mail and I will be glad to assist you out. It is also available free of charge for both personal and commercial projects under the creative common license. (I’m unable to provide any demo of it as I do not have my own server yet, apology!)

Download Script v1.1 ↓Snapshot→

Advertisements

Comments on: "JQuery & CSS3 Slideshow" (2)

  1. […] I’ve released a copy of my JQuery + CSS Slideshow for everyone to download, here. A few days later, I figured besides sharing, I could probably teach a thing or two of it. As […]

  2. […] I’ve released a copy of my JQuery + CSS Slideshow for everyone to download, here. A few days later, I figured besides sharing, I could probably teach a thing or two of it. As […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: