Wednesday, 30 December 2015

20 Awesome jQuery Sliders

Image and content sliders are an extremely common element in modern web design. Coding your own slider from scratch is always an option, but... thumbnail 1 summary
Image and content sliders are an extremely common element in modern web design. Coding your own slider from scratch is always an option, but if you’re looking to save some time or if you’re not sure how to code your own slider there are plenty of options. In some cases, working with an existing jQuery plugin will give you the chance to observe the code that is being used, and learn things that can be used in situations where you do want to code from scratch. 



In this post we’ll look at 20 different options for sliders. Many of them allow you to create responsive sliders, and some are optimized for mobile users as well. Most of these options are free. The last two listed are premium, and one is free with options to pay for a WordPress plugin version.


.
Slider Revolution
Slider Revolution is a premium WordPress plugin ($15) that allows you to easily create and customize responsive sliders. It comes with 20 different transitions, it’s touch enabled, and you can include just about any content you want within your slider.
Slider Revolution
Wow Slider is an “awesome slider for non-coders”. It is a responsive slider with plenty of beautiful visual effects, and what makes it unique is the point-and-click wizard that makes it possible to create sliders with no coding.
Wow Slider
Nivo Slider
Nivo is possibly the most popular jQuery slider plugin. It is free to download and use (WordPress plugin is not free, costing $19 for a single site license). Nivo comes with 16 different transition effects, it’s responsive, and it’s easy to work with.
Nivo Slider
Simple Multi-Item Slider
The Simple Multi-Item Slider is a great option for e-commerce sites, and for other sites looking to display items and products. It uses some nice CSS animations as well as jQuery to create a very attractive item display.
Simple Multi Item Slider
Fullscreen Slit Slider with CSS3 and jQuery
The Fullscreen Slit Slider from Codrops is a unique slider with some interesting transition effects. Instead of simply sliding, it slices open the slide as it transitions to the next slide.
Full Screen Slit Slider
Parallax Content Slider with CSS3 and jQuery
If you’re looking for a slider that will allow you to include content as well as images, the Parallax Content Slider could be a good choice. It uses CSS3 animations with each single element, so you have a lot of control.
Parallax Content Slider
Rotating Image Slider with jQuery
If you’re looking for a unique slider that will help your site to stand out, this is a great option. Instead of simply slider images in and out it gives theme a slight rotation, which creates a really interesting slider that visitors will love.
Rotating Image Slider
Parallax Slider with jQuery
This sliders moves the background when sliding an image, creating an interesting parallax effect that separates it from more typical sliders.
Parallax Slider
Slider Gallery with jQuery
This slider displays thumbnails in a horizontal slider. As is shown in the demo, it is great for photography websites to display photos in different categories.
Slider Gallery
Unslider
If you’re looking for a simple and lightweight slider, unslider is a great option. It allows you to create a responsive slider, but it doesn’t have tons of fancy transition effects to chose from.
Unslider
Unoslider
Unoslider is designed to be responsive and with mobile users in mind. It is touch enabled and mobile optimized, plus it offers unlimited transitions and is easily themeable.
Unoslider
Responsiveslides.js
Responsiveslides.js is a simple and lightweight jQuery slider. It creates a responsive slider using elements inside a container.
Responsiveslides.js
Camera
Camera is a responsive slider using jQuery mobile so users can mobile users can scroll through slides easily on a touchscreen. The are plenty of options for customizations and it supports HTML and video in addition to just images.
Camera
SlidesJS
SlidesJS is a responsive slider with features like touch support and CSS3 transitions.
Slides.js
bxSlider
bxSlider is responsive and mobile-friendly. You can create sliders with horizontal, vertical, or fade transitions. Your slides can contain images, video, or HTML, and there are tons of configuration options.
bxSlider
Basic jQuery Slider
The Basic jQuery Slider is a good option if you are looking for a simple slider that you can easily customize. It is intended to be a starting point without tons of features.
Basic jQuery Slider
Elastislide
Elastislide is a responsive image carousel that can be laid out horizontally or vertically and will adapt fluidly within your layout. It displays thumbnails in an attractive presentation.
Elastislide
RSlider
RSlider is a fullscreen responsive slider that supports categories.
RSlider
FlexSlider
FlexSlider is a free option from WooThemes. It offers horizontal and vertical slides, plus fade animations.
Flexslider
Slider Revolution
Slider Revolution is a premium WordPress plugin ($15) that allows you to easily create and customize responsive sliders. It comes with 20 different transitions, it’s touch enabled, and you can include just about any content you want within your slider.
Slider Revolution
SlideDeck
SlideDeck is a premium WordPress plugin ($49 for a single site license). It’s extremely popular because it offers a ton of useful features and because it is easy to set up beautiful responsive sliders from within the WordPress dashboard without any coding. For designers/developers who prefer to code their own slider, or to customize the code of an existing slider, SlideDeck may not be the ideal option. But for end users who want to be able to create sliders without the need to mess with code, it can be a great choice.

SlideDeck

No comments

Post a Comment