Compact Mini Slider Using jQuery

6 Aug , 2012  jQuery 

A tutorial explaining how to implement a cool and compact slider using jQuery. jQuery sliders are very popular and the compact ones saves us lots of real estate on the website. The best part of this compact jQuery slider is, they load and start automatically after the page is ready.

Features of the slider:

1) Compact looking implemented using jQuery.

2) Auto loading and auto slider or slideshow for images.

3) Slide anything, not just images.

4) Fade effect or fade transitions for the slider.

Here is a demo before we begin:

DEMO | DOWNLOAD

Explanation:

This tutorial uses the jQuery called as jquery.animate-enhanced.js.

JavaScript Code which does the magic is:

The above code is known as the “Variation of Mathias Bynens  Simplest Slider“. The code works with the jQuery code by setting the speed to 600 and timeout time to 3000ms. These variable is used to use for the slider fade effects using the

The complete code starts functioning on load of the page. The slideshow time is then varied using the below code:

Put together, the slider fades perfectly yet smooth. The rest of the styling is handled using the CSS & HTML.

CSS Code:

HTML Markup:

The CSS and HTML, doesn’t require much of the explanation as they are self explanatory. Here is the demo and download once again for quick reference.

DEMO | DOWNLOAD

Please, let us know if you have trouble implementing the above slider. Also, discuss the slider to know more options which can be explored. We will see more such wonderful sliders with much more features in the near future in this very blog. Stay tuned for more interesting web development and design tutorials. Up to you guys..!!!



,

Comments are closed.