Have you noticed that, for instance, when browsing the latest WordPress themes, they almost all include a slider of some sort, whether it is an image gallery or a content slider, or better still, has the capability to incorporate both?
Sliders are becoming increasingly popular because they resolve a lot of space problems. Content sliders can offer the viewer a lot of information in a small space, and both content sliders and image galleries can provide user-interaction.
Here we have rounded-up 15 jQuery content sliders and carousels, including a couple of tutorials, for your perusal.
jQuery Space-Saving Content Sliders and Carousels
TN3 Gallery is a jQuery image gallery with slideshow, transitions effects, multiple album options, CSS skinning and much more. It’s compatible with all modern desktop and mobile browsers. It’s the world’s best photo gallery.
A fully-featured, customizable content or slide show slider.
Slide Deck comes bundled with a bunch of super-awesome features designed to save you development time and give you the flexibility to use it in a variety of ways – whether you’re building anything from an image gallery, to a product tour and lots of things in-between.
Build a Content Slider with jQuery
There are a ton of tutorials already out there about creating content sliders with jQuery. So why bother writing another one? While I don’t think that the existing tutorials are incorrect, bad, or otherwise unacceptable, I haven’t found one that met my needs.
jQuery Slider Shock
SliderShock is bundled with a lot of features that you’ll find very useful, such as slides thumbnails, 3D animation, responsiveness, custom patterns and much more.
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch.
Compact News Previewer
The news previewer will show some list of articles on the left side and the preview of the article with a longer description on the right. Once a news on the left …
Coda Slider Effect
Smooth Div Scroll
The basic principle behind Smooth Div Scroll is simple: let one div scroll inside another div.Ether two hotspots are used to trigger the actual scrolling or you can let it autoscroll. The scroll Wrapper determines how much of the scrollableArea that should be visible – everything outside the scrollWrapper is hidden from view.
The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It’s a very effective method to increase the web site usability and engage the user.
Simple Controls Gallery
Displays images either as an automatic or manual slideshow, with the image faded into view over the previous. A Navigational Panel slides up when the mouse rolls over the gallery to play, pause, or step through to a specific image within the gallery. In automatic mode, set the number of cycles before the script stops rotating.
Making a Content Slider With jQuery
There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view. jQuery UI is the official library of widgets and utilities built on top of jQuery; it’s very easy to use, highly configurable and robust, and extremely easy to theme.
Start And Stop Slider
A little while back Chris Coyier did a tutorial on a Featured Content Slider. It was neat, but a little limited in customization possibility. The two most requested features were being able to add/remove “panels” and a stop/start button.
Agile Corousel Slider
Implement your slideshow with the Agile Carousel JQuery plugin. Highly customizable so you can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS. Use it for agile web development.
Create a Slick and Accessible Slideshow
There is no doubt that sliders of one kind or another are becoming the trend, they are eye-catching and effective, as well as providing enormous space-saving opportunities.
Do you have a favorite slider or carousel that we have missed from this list? Please share your links and comments with us in the section below.