Skip to main content

15 best free responsive jQuery image sliders

15 best free responsive jQuery image sliders
Image sliders are the best way to highlight your prior content on homepage/landing page. In the vast web world you may find a large number of Image sliders, and maybe you don’t have sufficient time and patient for checking all of them out. So here I tried to scale down the number to 15 and presenting 15 of the best free, responsive and latest tech enriched content sliders. See their demo and download them, then use them on your project. Read on:

1. FlexSlider

FlexSlider

 
An awesome, fully responsive jQuery slider toolkit.     
  • Simple, semantic markup    
  • Supported in all major browsers    
  • Horizontal/vertical slide and fade animations    
  • Multiple slider support, Callback API, and more    
  • Hardware accelerated touch swipe support    
  • Custom navigation options    
  • Compatible with the latest version of jQuery
Demo
Download

2. unslider

 unslider


unslider is a responsive and cross-browser jQuery plugin for creating clean and flexible content sliders on your web site. unslider currently supports almost all the html elements like image, text, video, etc.    
  • Lightweight (~3kb minified) and easy to implement    
  • Responsive and cross-browser    
  • Keyboard and Dot navigation support    
  • Customizable transition animations    
  • Touch & Swipe support    
  • Prev/Next button support
Demo
Download

3. Ideal Image Slider 

Ideal Image Slider


The aim behind the Ideal Image Slider is to create a slider which has just the right amount of features, with no bloat and be easy to extend so that more features can be added as “extensions”. Here are the ideals and core features:     
  • HTML5 (SEO optimised)    
  • CSS3 transitions (a few simple transitions like slide/fade)    
  • Left/Right navigation (including touch/swipe support)    
  • Responsive    
  • HiDPI (retina) support    
  • ARIA support    
  • Extremely simple to setup (no dependencies)    
  • Very extensible    
  • Uses progressive enhancement
Demo
Download

4. Slider Pro

Slider Pro


Slider Pro is a professional jQuery plugin which allows you to display a group of mixed content in a responsive and touch compatible slider. Key Features:     
  • Fully responsive with custom JS breakpoint.    
  • Touch swipe, keyboard, and thumbnails navigation.    
  • Fullscreen and auto height support.    
  • CSS3 powered transitions.    
  • Infinite loop like a carousel.    
  • Image lazy load.    
  • Retina image support.    
  • Galley lightbox enabled.    
  • Automatic video handling.    
  • Supports mixed content, not only images.
Demo
Download

5. jSlider

jSlider


jSlider is a simple, lightweight, full-featured jQuery plugin for creating animated content / images on your webpage / web applications. Features:     
  • Mobile-friendly. Support both mouse drag and touch swipe to switch between slides.    
  • Cross browser. Supports all major browsers and even IE 8/9/10.    
  • Options can be passed via data-attributes directly in the markup.    
  • Arrows and dots navigation.    
  • Custom animation types.   
  •  Fully responsive for any screen size.    
  • 3 built-in slider modes (slide, fade & gallery) to fit your any needs.    
  • Supports infinite looping that makes the slider act like a carousel.    
  • Auto resize slider content to fit parent container.
Demo
Download

6. Slippry

Slippry


Responsive slider plugin for jQuery. Intrinsic trick to enable responsive resizing without js!
  • Slippry is a pretty customization slider, included some (slightly random) combinations of options and the function settings and CSS (if applicable) to recreate them. 
  • Designs/styles: Out-of-the-box, Pictures, Portfolio, News, Shop, Thumbnails, CSS vs jQuery.
Demo
Download

7. Hero Slider

Hero Slider


It is a common approach to fill in the intro section of a website with a slideshow: you’re trying to show the users as much as you can above the fold, yet you want to deliver this information in an organized and clean way.  Therefore we built for you a ready-to-use jQuery slider, with some built in options like video/image backgrounds and different text alignments. In an attempt to increase user engagement, we replaced the “navigation arrows” with buttons. The difference is: buttons have a title, a hint about what kind of content to expect. Arrows just tell users “you can switch slide”.

Demo
Download

8. jQuery lightSlider 


 jQuery lightSlider


jQuery lightSlider is a lightweight responsive Content slider.  Features:     
  • Fully responsive – will adapt to any device.    
  • Supports touch devices and swiping.    
  • Gallery mode to create an image slideshow with thumbnails    
  • Small file size (6kb) (minified), fully themed, simple to implement.    
  • CSS transitions with jQuery fallback.    
  • Full callback API and public methods.    
  • Auto play and auto loop to create a content carousel.    
  • Keyboard, arrows and dots navigation.    
  • Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone.    
  • Slide and Fade Effects.    
  • Multiple instances on one page.
Demo
Download

9. Zenith

Zenith


Zenith is responsive slider jquery plugin that comes in 4 basic layouts and 7 transition animation available
  • 4-th layout, or slider layout, has some variations of its own, producing 3 more pre-defined sub-layouts and unlimited possibilities of styling, editing and creating some of your own variations.
  • You can edit some HTML, and add that markup by passing it’s elements classes or id’s to the options when initializing zenith. 
  • Zenith differs from other responsive slider jquery plugins in dozen ways.
  • It’s unique layouts for showcasing highlights will enhance your product, or app presentation.
  • You can style almost every part by passing your own custom CSS directly into options, without even touching the main style.
Demo
Download

10. SmoothSlides 



A responsive jQuery slideshow with beautiful panning effects on each image.

Demo
Download

11. jcSlider

jcSlider


A responsive slider jQuery plugin with CSS animations.This plugin does not use jQuery animations. Only CSS3, because performance matters. No need to calculate distances, sizes or whatever, only add and remove classes to elements to animate them. It couldn’t be easier!     
  • Only 1 js file, 1Kb minified    
  • Responsive    
  • Multiple effects (more than 60!)    
  • Works with html, images… whatever you want to animate
Demo
Download

12. Responsive Layered Slider with CSS3 & jQuery

Responsive Layered Slider with CSS3 & jQuery


The entire slider works by using just a JavaScript document and you don't have to attach any CSS style sheets to use it.
  • Each layer will have 18 possible effects which you can use to your liking. 
  • All animations are created by inserting CSS code into the page using JavaScript
Demo
Download

13. Zoom Slider

 Zoom Slider


A simple content slider with depth-like zoom functionality for a predefined area in each slide. Each slide has a predefined zoom area that will be used to calculate the appropriate scale value for a fullscreen fill.  Once the icon for zooming is clicked, the zoom area as well as the page get scaled, creating the illusion that the viewer is approaching the item. Once the whole page is covered, it shows some more details.

Demo
Download

14. PgwSlideshow

PgwSlideshow


Responsive slideshow / gallery / carousel for jQuery / Zepto     
  • Fully responsive slideshow    
  • Desktop and Mobile devices supported    
  • Less than 4 KB (minified and gzipped)    
  • Full customization with the CSS file included
Demo
Download

15. slider.js

slider.js


slider.js is a lightweight, simple-to-use jQuery plugin that helps you generate a fullscreen, responsive slider carousel for showcasing your photos, designs and stories.

Demo
Download

So what you think about this list don’t forget to mention. More Cool slider information base list will be publish soon, so stay subscribed. Goodluck…..

Comments

Popular posts from this blog

How to use Google Font in Blogger post

Your Blogger template’s default fonts are basically Ariel, Georgia, Times, Trebuchet, Helvetica. These fonts are simple and not so attractive. If your blog running with these default fonts may be you will lost some audience, those audience who care about your blog design overall too. But these default fonts can be change easily. There are lots of font provider offers web fonts what can be easily integrate to your site. Google web font is one of best web font provider. In Google font’s collection more than 650+ font with various styles you can find. Using Google font in your post, you can customize your font style more specifically, like font thickness, slant, width, line height, font weight, font script etc. Let’s add Google font in your Blogger, this process is easy and difficulty is beginner. Read on-

How to use/install Google Font in Blogger post
Step 1: Choosing Fonts
Go to Google web font (Here), See demo of font family by Word, Sentence, Paragraph. Use Filter (Left side) for find …

Add Cool Social Media Sharing icons below posts in Blogger

Change the taste of random looking social sharing button below posts in Blogger, here you can find a different and cool social media sharing widget what I named it Coldblodded! This social sharing widget loads faster than other icon base social shares, it's icons change color with mouse hover with flipping effect, it got the major social media sites share, main color is black colored what looks artistic and attractive.
Coldblodded social media sharing widget offers shares a post to Facebook, Twitter, Google plus, Pinterest and bookmark a post on Delicious, Evernote, Stumble upon, Digg, Blogger, Yahoo bookmarks additional feedburner email subscription. It made with CSS, HTML and icons uses only a piece of image what will draw all icon process calls CSS image transition CSS Sprite, This widget also reduce HTTP request unlike other icon base sharing choices. Will be fit to any kind of Blogger blog, no matter they are professional blogs, gallery or other features sites. Let's see…

How to Auto tweet and Auto post to Facebook your Blogger blog’s post

Letting your social networking fan know about your new published post instantly ‘Auto tweet and auto post to Facebook’ your post is very effective and time saving. For Wordpress - using plugin can solve this auto tweet and auto post job but Blogger doesn’t have option like this. But there is also solution exists. Let’s see what I’m talking about Auto tweet and Auto post to Facebook your blogger blog’s post.


How to Auto tweet and Auto post to Facebook your Blogger’s post

Twitter Feed, does the job easily. All you need to do is set up your blog URL at their service. Here is a quick overview: How to submit you blog at Twitter Feed for Auto tweeting and Auto posting to Facebook your Blog post.

Below walk through steps are written; just read on:-
Open an account at Twitter Feed, confirm your email, and visit dashboard.Click on ‘Create new feed’, you will direct to setup pageIn setup page ‘Name your feed’ and ‘add your source URL’ you’ll be fill up with your site’s feed. Every site has feed…

Easily Get 50000 free Backlink for your website

Backlinks are heart of SEO. Without backlink your website will not get a good position in search result and won't get indexed quickly. As you already knew there is two ways you can get backlinks one is Natural linking and another is paid or automated linking. Natural linking is worth to doing and it takes a while but if you don’t have enough time, running a professional business website and need to reach a destination quickly, automated backlinking going to be your last choice. To make automated backlinks you will need to buy paid link package or if you just don’t willing to buy links right now let’s start with free. Here such kind of free backlink maker, free backlink generator listed. And definitively you have a chance to create 50000+ free backlink for your website. But you should also remember Google doesn't like it, I mean Google doesn't recommend it at all. Read on-

+ 50000 free backlink for your websiteIndex kings
Rapid website submitter index kings it will submit y…

How to remove 'You may use these Html tags and attributes'

You may use these HTML tags and attributes makes our Wordpress comment box/form noisy, ugly and wired! Some visitor just gets shocked with these messy HTML note tag and attributes using request and don't like to comment in your site anymore. To remove this HTML tag note, all you need to embed a code phrase in to your Wordpress theme. Actually this will not really remove or delete this ugly HTML tag using request from comment form, This CSS code phrase embedding will disallow/disable HTML tag note from Wordpress comment box of your theme.

This code phrase is-

 .form-allowed-tags { display:none; }

How to remove You may use these HTML tags and attributes
I am using Twenty Fourteen Wordpress default theme for this tutorial (actually it will work on any theme because Stylesheet contains all CSS codes and this code just will disallow/hide up this comment HTML note)

Step 1 : Select the theme you use Log in to your Wordpress, From dashboard hover mouse on Appearance menu, Select 'Themes…