Adaptive slider without javascript on css3. Adaptive fashion slider. Alternative css3 slider based on animation effects
Collection of free HTML and CSS slider code examples: card, comparison, fullscreen, responsive, simple, etc. Update of March 2018 collection. 2 new items.
Table of Contents
Related Articles
About the code
A set of onboarding screens in HTML/CSS/JS. A personal experiment with layering PNG icons, CSS3 transitions, & flexbox.
HTML, CSS and JavaScript information card slider.
Made by Andy Tran
November 23, 2015
Photo slider working on desktop and mobile browsers.
Made by Taron
September 29, 2014
Comparison (Before/After) Sliders
About the code
A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery.
About the code
A before and after slider with only html and css.
About the code
Playing around with a new idea using my two layer before/after image slider. Keeping it minimal. Keeping it vanilla. Like it if it"s useful:)
Vanilla JS, minimal, nice to look.
Made by Huw
July 3, 2017
About the code
A "split-screen" slider element with JavaScript.
A little experiment for a before & after slider all inside a SVG. Masking makes it pretty simple. Since it’s all SVG, the images and captions scale nicely together. GreenSock’s Draggable and ThrowProps plugins were used for the slider control.
Made by Craig Roblewsky
April 17, 2017
Uses customized range input for slider.
Made by Dudley Storey
October 14, 2016
Responsive image comparison slider with HTML, CSS and JavaScript.
Made by Ege Görgülü
August 3, 2016
HTML5, CSS3 and JavaScript video before-and-after comparison slider.
Made by Dudley Storey
April 24, 2016
A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery.
Made by CodyHouse
September 15, 2014
Fullscreen Sliders
About the code
Nice transition effect for fullscreen slider.
About the code
Horizontal parallax sliding slider with Swiper.js.
About the code
Responsive smooth 3D perspective slider on mouse move.
Fullscreen hero image slider (swipe panels theme) with HTML, CSS and JavaScript.
Made by Tobias Bogliolo
June 25, 2017
A slider interaction thing using Velocity and Velocity effects (UI Pack) to enhance the animation. Animation is triggered via arrow keys, nav click, or scrolling jack. This version includes borders as part of the interaction.
Made by Stephen Scaff
May 11, 2017
Simple slider in a minimal style to show off images. Part of the image pops out on each slide.
Made by Nathan Taylor
January 22, 2017
The thing is pretty easy customizable. You can safely change font, font size, font color, animation speed. The first letter of a new string in array in JS will appear on a new slide. Easy to create (or delete) a new slide: 1. Add new city in the array in JS. 2. Change number of slides variable and put a new image in scss list in CSS.
Made by Ruslan Pivovarov
October 8, 2016
- Clip-path for image masking rectangle border (webkit only).
- Blend-mode for this mask.
- Smart color system, just put your color name and value into sass map and then add proper class with this color name to elements and everything will work!
- Cool credits side-menu (click small button in the center of demo).
- Vanilla js with just< 200 lines of code (basically it’s just adds/removes classes).
October 7, 2016
This skewed slider with scrolling based on pure JS and CSS (without libraries).
Made by Victor Belozyorov
September 3, 2016
A slider animation with Pokemon design.
Made by Pham Mikun
August 18, 2016
HTML, CSS and JavaScritp slider with complex animation and half-collored angled text.
Made by Ruslan Pivovarov
July 13, 2016
Slider parallax effect with HTML, CSS and JavaScript.
Made by Manuel Madeira
June 28, 2016
HTML, CSS and JavaScript slider with ripple effect.
Made by Pedro Castro
May 21, 2016
Clip-Path revealing slider with HTML, CSS and JavaScript.
Made by Nikolay Talanov
May 16, 2016
GSAP + Slick slider with preview of previous/next slides.
Made by Karlo Videk
April 27, 2016
HTML, CSS and JavaScript full page slider.
Made by Joseph Martucci
February 28, 2016
Full slider prototype with HTML, CSS and JavaScript.
Made by Gluber Sampaio
January 6, 2016
A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax.
Made by Arden
December 12, 2015
December 5, 2015
Full-Screen slider (GSAP Timeline) #1 with HTML, CSS and JavaScript.
Made by Diaco M.Lotfollahi
November 23, 2015
HTML and CSS slider with custom effects.
Made by Nikolay Talanov
November 12, 2015
Fullscreen drag-slider with parallax with HTML, CSS and JavaScript.
Made by Nikolay Talanov
November 12, 2015
Proof of concept rotating slider. Uses clip-path and lots of math.
Made by Tyler Johnson
April 16, 2015
A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!
Made by Joseph
August 19, 2014
Responsive Sliders
About the code
Image and content with parallax effect.
About the code
An experiment to create a completely responsive vertical slider with thumbnails using only CSS, and retaining the aspect ratio of the images.
About the code
A simple Flexbox image slider/carousel made with vanilla JavaScript.
About the code
This is an experiment that simulates a motion blur effect every time a slide is switched. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Although the effect does not require any Javascript to properly work, in this example Javascript is only used for the slider functionality.
About the code
Cool animates slider with JS.
About the code
This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider.
Exploring some slider transitions. Swiper slider with parallax option enabled. Playing with CSS filters mostly here.
Made by Mirko Zorić
June 12, 2017
Simple GSAP slider with some subtle tween animations.
Made by Goran Vrban
June 9, 2017
Slider UI with HTML, CSS and JavaScript.
Made by Mergim Ujkani
June 6, 2017
Slider GSAP version 2.
Made by Em An
May 4, 2017
A little slicey transition slider using a simple add class deal. Have to smooth out the timings a bit and decide on the best approach for mobile (just stack, add touch events, make images full viewport, etc. Supports scrollwheel (scroll jacking), nav buttons and arrow keys. Can also increase the content wrapper to make the images fill viewport in their non animating state, which is kinda cool as well.
Made by Stephen Scaff
January 3, 2017
Leveraged CSS border-image & clip-path to create a slider animation effect.
Made by Emily Hayman
December 31, 2016
Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.
Made by Robert
November 28, 2016
HTML, CSS canvas slider.
Made by Nvagelis
October 29, 2016
HTML, CSS and JavaScript 3D smooth slider.
Made by Eduardo Allegrini
October 19, 2016
HTML and CSS cupcake slider with sprinkles!
Made by Jamie Coulter
October 14, 2016
Made by mario s maselli
October 12, 2016
Exploring UI animation #2 with HTML, CSS and JavaScript.
Made by mario s maselli
September 22, 2016
Exploring UI animation #3 with HTML, CSS and JavaScript.
Made by mario s maselli
September 22, 2016
Ecommerce Slider v2.0 with HTML, CSS and JavaScript.
Made by Pedro Castro
September 17, 2016
HTML, CSS and JavaScript clean slider with curved background.
Made by Ruslan Pivovarov
September 13, 2016
Exploring UI animation #1 with HTML, CSS and JavaScript.
Made by mario s maselli
September 8, 2016
Enjoy the power of CSS: Up & down each middle image and paginated slider with lightbox.
Made by Kseso
August 15, 2016
Double exposure is a photographic technique that combines 2 different images into a single image.
Made by Misaki Nakano
August 3, 2016
Slider using CSS3 property clip.
Made by Pedro Castro
May 1, 2016
Responsive CSS slider.
Made by geekwen
April 19, 2016
This is a simple slider experiment displaying words with beautiful meanings which cannot be directly translated. Focus: elegant typography and simple yet alluring transitions.
Made by Joe Harry
April 5, 2016
The animation idea is to change the value of CSS clip path, thus make a masking effect.
Made by Bhakti Al Akbar
March 31, 2016
Dot slider with HTML, CSS and JavaScript.
Made by Derek Nguyen
March 16, 2016
Prism effect slider with HTML, CSS and JavaScript.
Made by victor
March 12, 2016
Sliding background gallery with HTML, CSS and JavaScript.
Made by Ron Gierlach
November 30, 2015
HTML, CSS and JavaScript slider solution.
Made by Jürgen Genser
September 30, 2015
A product slider powered by Sequence.js. Sequence.js - The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.
Made by Ian Lunn
September 15, 2015
Tiny circle customized slider.
Made by Bram de Haan
August 11, 2015
Responsive GTA V slider with HTML, CSS and JavaScript.
Made by Eduard Mayer
January 24, 2014
It’s like a slider but it rotates cubeishly for reasons unknown.
Made by Eric Brewer
December 4, 2013
Made by Hugo DarbyBrown
August 28, 2013
Simple Sliders
Image overlay slider with HTML, CSS and vanilla JavaScript.
Made by Yugam
June 7, 2017
HTML and CSS featured image slider.
Made by Joshua Hibbert
June 16, 2016
About the code
Simple pure made with
Feature slider with HTML, CSS and JavaScript.
Made by Andy Lorimer
October 23, 2015
CSS only.
Made by Alberto Hartzet
May 6, 2015
Features: - automatic slideshow - pause on hover - dynamic slide counter - show/hide controls on hover.
Made by André Cortellini
August 14, 2014
Multi axis image slider with HTML, CSS and JavaScript.
Made by Burak Can
July 22, 2013
Cube slider, a small experiment with HTML5/CSS3 3d transforms.
Made by Ilya K.
June 26, 2013
CSS sliders have some advantages over Javascript sliders. One of these benefits is loading speed. Not only are images for sliders used in large sizes (if there is no optimization for different screens), it also takes some time to load scripts. But in the article you will only see sliders using pure CSS.
Here's what I found on a website about sliders:
1. CSS3 image slider
A CSS slider that uses radio buttons to navigate slides. These radio buttons are located under the sliders. Also, in addition to radio buttons, navigation is carried out using arrows on the left and right. To keep track of which image is currently displayed, the :checked pseudo-classes are used.
2. CSS3 image slider with thumbnails
Unlike the previous CSS slider, here instead of radio buttons at the bottom there are thumbnails of all images, which is also convenient when creating an image gallery. The images change with a peculiar effect: they smoothly disappear when enlarged.
3. Gallery with CSS
But this CSS slider is perfect for sales pages. As a rule, when developing landing pages (selling pages), many web developers place a slider at the very beginning, so that on the first screen (without scrolling) the visitor immediately sees all the benefits that are available to him on this page. Besides everything, this slider is adaptive, which is also nice.
4. CSS slider without links
I would like to point out right away that this slider does not use links! By default, in addition to the main image (slide), 2 more slides are visible. They are located behind the main one. Changing slides occurs in a beautiful mode: first, two slides are moved apart and the slide that will then become the main one becomes centered. The slide is then enlarged and placed in front of the others.
5. Responsive slider using CSS3
Another adaptive slider, the control of which is based on radio buttons. To see how this slider will look on different devices, you can either change the browser window yourself, or on the page with the slider there are special icons for different devices, by clicking on which you will see how the slider will look on a computer, tablet or smartphone.
***BONUS SLIDER***
In addition to all the sliders presented above, I want to please you with one more. This slider is perfect for creating an image gallery. You can’t explain in words what he does, so it’s better to watch everything in the video:
Conclusion
Using sliders, you can beautifully design image galleries, placing them more compactly, insert a slider into the first screen (the part of the page that is visible without scrolling) of the sales page to immediately show the visitor the main benefits that he will receive. You can still find a lot of ways where and how you can use sliders, but one thing is clear - they are useful when used correctly.
Working on a book about jquery, I was faced with the fact that many of my subscribers asked me to tell in it how to write a slider script in jquery. Sorry, dear friends! This is the 21st century and, fortunately for us, all the delights of CSS3 are available to us, allowing us to implement such things without a single line javascript.
Part 1.
To begin with, I’ll explain to those who don’t know what a slider is. Slider- this is a block of a certain width that occupies part of a web page, or its entirety. Its main feature is that it changes automatically or manual mode content. The content can be either graphic images or some text.
Of course, you may wonder: why reinvent the wheel if there are plenty of slider implementations in javascript? Here are my arguments:
- CSS effects are faster. This is clearly visible on mobile devices.
- To create a slider, no programming skills are required.
So, for our example, you need four images, although in your project you can make a strip with as many images as you need. The only condition is that all images must be same size. Also, I forgot to tell you, our slider will be adaptive (yes, Adaptive layout, you read that right) and you can use it in any of your projects for any devices. But enough chatter, I’m already itching to write mega-code. Let's start with HTML:
I left it blank alt attribute, to save space, you can fill it out yourself, based on your SEO queries and to inform users who have disabled the display of images in their browser. I would also like to draw your attention to the fact that the first image ( alladin.jpg) will also be present at the end of the strip, which will allow our slider to scroll cyclically without jerking.
For convenience, width is 80% of the window, and max-width is the size of each individual photo (1000px in our example) since we don't want the image to be stretched:
Slider ( width: 80%; max-width: 1000px; )
In our CSS code, the width of the figure is expressed as a percentage of the div in which it is located. That is, if the image strip contains five photos and the div produces just one, the width of figure is increased by five times, which is 500% of the width of the container div:
The font-size: 0 setting sucks all the air out of the figure, removing any white space around and between images. position: relative allows you to easily move the figure during animation.
We need to equally divide the photos within the image strip. The formula is very simple: if we assume the figure's width is 100%, each image should take up 1/5 of the horizontal space:
There is a need to use the following CSS rules:
Imagestrip img (width: 20%; height: auto; )
Now let's change the overflow property for the div:
Slider ( width: 80%; max-width: 1000px; overflow: hidden )
Finally, we need to make the image strip move from left to right. If the container div's width is 100%, each movement of the image strip to the left will be measured as a percentage of that distance:
@keyframes slidy ( 20% ( left: 0%; ) 25% ( left: -100%; ) 45% ( left: -100%; ) 50% ( left: -200%; ) 70% ( left: -200 %; ) 75% ( left: -300%; ) 95% ( left: -300%; ) 100% ( left: -400%; ) )
Each image on the slider will be enclosed in a div and will move by 5%.
Slider figure ( position: relative; width: 500%; animation: 30s slidy infinite; font-size: 0; padding: 0; margin: 0; left: 0; )
Part 2.
We made it mega cool slider without javascript. Let's add control buttons to it before we rest on our laurels. More precisely, not into it (I’m already too lazy to tinker with it), but let’s create a new one.
So, our HTML code:
Now let's take care of animating our slides. Unfortunately, it will be different for different numbers of slides:
/* for a slider of two slides */ @keyframes slider__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100%( opacity:0;) ) /* for a slider of three slides */ @keyframes slider__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% (opacity: 0;) 100%(opacity:0;) ) /* for a four-slide slider */ @keyframes slider__item-autoplay_count_4 ( 0%(opacity:0;) 8% (opacity:1;) 25% (opacity:1; ) 33% (opacity:0;) 100%(opacity:0;) ) /* for a slider of five slides */ @keyframes slider__item-autoplay_count_5 ( 0%(opacity:0;) 7% (opacity:1;) 20 %(opacity:1;) 27% (opacity:0;) 100%(opacity:0;) )
Sad, isn't it? In addition, do not forget that for Opera, Chrome, IE, and Mozilla you need to write everything the same, but with the appropriate prefix. Now let's write the code to animate our slides (hereinafter the code for three slides will be shown. Code for more sites you can see in the example code):
Slider_count_3 .item ( -moz-animation: slider__item-autoplay_count_3 15s infinite; -webkit-animation: slider__item-autoplay_count_3 15s infinite; -o-animation: slider__item-autoplay_count_3 15s infinite; animation: slider__item-autoplay_count_3 15s infinite; .ite) m:nth -of-type(2) ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; ) .item:nth-of-type (3) ( -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; )
As you can see, for the first pair the zero offset does not change. In addition, the offset does not depend on the number of slides, so it can be described once for the maximum number of slides. Now let's make sure the slides don't change when the user hovers over our slider:
Slider:hover .item ( -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; )
Finally, we got to switching our slides. As you know, there are a number of events that allow you to change the properties of an element using CSS. For a mouse click, the pseudo-classes :focus, :target, or :checked on one of the page elements can help us. The pseudo-class :focus can only have one element per page, :target clogs the browser history and requires the presence of the tag; The pseudo-class:checked remembers the state before leaving the page, and, in the case of radio buttons, can only be selected on one element in the group. Let's take advantage of this. Insert before
And then
/* Style of sliders in the "not selected" state */ .slider .item ~ .item ( opacity: 0.0; ) /* Style of sliders in the "selected" state */ .slider input:nth-of-type(1):checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth-of-type(2), .slider input:nth-of-type( 3):checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4), .slider input:nth- of-type(5):checked ~ .item:nth-of-type(5) ( opacity: 1.0; )
We used switching the opacity property of the container slide with the picture. This is due to the fact that, unlike the img element, you can place any additional information (for example, the title of the slide) in the div container. Of course, if we were using Javascript, we could use the data attribute. But we agreed, remember?)) For the slides, we will specify the transition properties so that the switching occurs smoothly and not jerkily.
Slider .item ( -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; )
Stopping the animation of all slides and buttons when selecting any slide can be done using the following CSS code:
Slider input:checked ~ .item ( opacity: 0.0; -moz-animation: none; -webkit-animation: none; -o-animation: none; animation: none; )
To support some older browsers, we do not animate the first slide, setting it to opacity: 1.0 , but we do have a problem: when the other two slides smoothly switch between each other, the first slide shines through. To eliminate this bug, set a transition-delay for all slides except the selected one, and for it we will make the z-index greater than that of all other slides:
Slider .item ( opacity: 1.0; -moz-transition: opacity 0.0s linear 0.2s; -webkit-transition: opacity 0.0s linear 0.2s; -o-transition: opacity 0.0s linear 0.2s; transition: opacity 0.0s linear 0.2s; ) .slider input:nth-of-type(1):checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth -of-type(2), .slider input:nth-of-type(3):checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4), .slider input:nth-of-type(5):checked ~ .item:nth-of-type(5) ( transition: opacity 0.2s linear; -moz-transition : opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear;
To ensure that the slides do not conflict with other site elements (for example, they do not overlap a drop-down menu with a z-index less than or equal to 6), we create our own context for the block
Slider ( position: relative; z-index: 0; )
That's all, actually. All that remains is to position our elements using the following CSS code and you can be happy:
Slider ( position: relative; z-index:0; ) .slider input ( display: none; ) .slider label ( bottom: 10px; display: inline-block; z-index: 2; width: 26px; height: 27px; background: #f4f4f5; border: 1px solid #e6e6e6; border-bottom-color: #bfbfbf; border-radius: 4px; inset 0 1px 0 #ffffff, 0 1px 2px #000000; cursor: pointer; font: 14px/27px arial, color: #333; .slider .selector_list ( position: absolute; bottom: 15px; right: 15px; z-index: 11; ) .slider .item ( position: relative; width:100%; .slider .item ~ .item ( position: absolute; top: 0px; left: 0px; )
This is the kind of adaptive slider without Javascript using CSS3 you should end up with.
In this tutorial, we'll create a simple responsive header page decorated with a carousel in which images slide from right to left. Our solution does not use JavaScript, the slideshow is based on CSS3 animations, which are supported by most modern browsers: Firefox 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ and IE10.
Step 1 - Preparatory
We will need 4 large images (in our example the size is 1200px x 390px). For a horizontal slider, we will prepare a 4800px x 390px image in Photoshop, place all our images one after the other horizontally and save the result in a format suitable for the web (“ slider-horizontal.jpg”).
Step 2 - HTML
What we'll actually be doing is animating the background-position property for our header. The header itself has very simple markup:
L'ile de Batz
The complete page code looks like this:
L'ile de Batz
Step 3: Mobile CSS
We'll start defining styles for mobile devices. Let's set the basic design and then add template extensions for larger screens. The text of the lesson provides only the basic properties, full code You can look at the sources:
Body ( width: 90%; min-width: 300px; max-width: 1200px; margin: 0 auto; padding-top: 1em; color: #504331 ) header ( text-align: center; position: relative; ) h1 ( font-size: 2.75em; background: white; padding: 0 10px; margin-bottom: .25em; ; left: 0; top: .5em; border-top: 1px solid #504331; border-bottom: 1px solid #504331; images/map.png) bottom center no-repeat; padding-bottom: 177px )
Step 4. Styles for Large Screens
On big screens sections .main And .screen should be displayed differently. Section .link will have a width of 300px and will be positioned as the right one side panel, and section .main will remain on the left. We will also add a double line to separate the sections. We will determine screen width greater than 1024px using the @media query:
@media only screen and (min-width: 1024px) ( .content ( position: relative; ) .main ( margin-right: 320px; padding: .5em 20px .5em 0; /*add a double line */ border-right : 1px solid #504331; box-shadow: 2px 0 white, 3px 0 #504331; .links ( position: absolute; right: 0; top: 0; width: 300px; text-align: right; ) )
Step 5: Responsive Header Images
Let's start working on the main part of our lesson: a responsive CSS slider in the header. First, let's make the background image responsive.
Header ( background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32.5%; )
Using two percentage values (400% for property background-size and 32.5% for the bottom margin) the header background will be displayed correctly regardless of the screen size.
Why 400%? We have 4 slides, so the display will be 1/4 of the background image in the header. That is, the background size should be 4 times wider than the header.
Why 32.5%? We position our background at the bottom of the header. The height of the background image is 390px, the width of the individual slide is 1200px, 390/1200 = 0.325, so the height is 32.5% of the width.
Step 6. Animation
We will animate the property background-position. To display the second image property background-position should matter 33.33333% bottom, third - 66.66667% bottom, and the fourth - 100% bottom. The first image is displayed when the property value is background-position equal 0 bottom or 133.33333% bottom(we set the repetitions to repeat-x).
Each image has 25% of the "fame" time. The first is displayed from 0 to 25%, the second from 25% to 50%, the third from 50% to 75%, and the last from 75% to 100%. We set the transitions so that the image starts to slide out a little early (using a value of 5%) before 25% of its rendering time has elapsed. This is what it looks like @keyframes:
@keyframes h_slide ( 0% ( background-position: 0% bottom; ) 20% ( background-position: 0% bottom; ) 25% ( background-position: 33.33333% bottom; ) 45% ( background-position: 33.33333% bottom ; ) 50% ( background-position: 66.66667% bottom; ) 70% ( background-position: 66.66667% bottom; ) 75% ( background-position: 100% bottom; ) 95% ( background-position: 100% bottom; ) 100% ( background-position: 133.33% bottom; ) )
Please note that you need to add browser prefixes: @-webkit-keyframes (for Chrome, Safari, iOS Safari, Android) and @-moz-keyframes (for Firefox 15).
Below is the complete header code. Our “h_slide” animation repeats every 24 seconds (6 seconds for each slide) in an endless loop. Time function matters ease-out, so that each slide slows down at the end of the transition.
Header ( text-align: center; position: relative; background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32.5%; -webkit- animation: h_slide 24s ease-out infinite; -moz-animation: h_slide 24s ease-out infinite; animation: h_slide 24s ease-out infinite)
05/18/15 48.9KIf you need to add a high-quality jQuery image slider to your site, then in this article you will find a description of the necessary plugins. Even though JQuery has made working with JavaScript much easier, we still need plugins to speed up the web design process.
We can make changes to some of these plugins and create new sliders that are much more suitable for the purposes of our site.
For other sliders, you simply add titles, images, and select slide transition effects that come with the slider. All of these plugins are accompanied by detailed documentation, so adding new effects or functions to them will not be difficult. You can even change event-based triggers if you're an experienced JQuery programmer.
Latest trends such as responsive design are very important for web projects, whether you are implementing a plugin or a script. All of these elements make each of these plugins very flexible. Everything that came out in 2014 is included in this list.
jQuery image sliders
Jssor Responsive Slider
I recently came across this powerful JQuery slider and was able to see first hand that it does its job very well. It contains limitless possibilities that can be expanded through the open source code of the slider:
- Adaptive design;
- More than 15 customization options;
- More than 15 image changing effects;
- Image gallery, carousel, full screen size support;
- Vertical banner rotator, list of slides;
- Video support.
Demo | Download
PgwSlider - responsive slider based on JQuery / Zepto
The only task of this plugin is to show slides of images. It is very compact, since the JQuery files are only 2.5 KB in size, which allows it to load really quickly:
- Adaptive layout;
- SEO optimization;
- Support for different browsers;
- Simple image transitions;
- The archive size is only 2.5 KB.
Demo | Download
Jquery Vertical News Slider
A flexible and useful JQuery slider designed for news resources with a list of publications on the left side and an image displayed on the right:
- Adaptive design;
- Vertical column for switching news;
- Expanded headers.
Demo | Download
Wallop Slider
This slider does not contain jQuery, but I would like to present it as it is very compact and can significantly reduce page loading time. Let me know if you like it:
- Adaptive layout;
- Simple design;
- Various slide changing options;
- Minimal JavaScript code;
- The size is only 3KB.
Demo | Download
Flat-style Polaroid gallery
A document-scattered-on-a-desk style gallery with a flexible layout and beautiful design should be of interest to many of you. More suitable for tablets and large displays:
Demo | Download
HiSlider – HTML5, jQuery and WordPress image slider
HiSlider introduced a new free plugin JQuery slider, with which you can create a variety of image galleries with fantastic transitions:
- Adaptive slider;
- Does not require programming knowledge;
- Several amazing templates and skins;
- Beautiful transition effects;
- Support for different platforms;
- Compatible with WordPress, Joomla, Drupal;
- Ability to display different types of content: images, YouTube video and Vimeo videos;
- Flexible setup;
- Useful additional features;
- Unlimited amount of content displayed.
Demo |Download
Wow Slider
WOW Slider is responsive jQuery slider images with amazing visual effects (domino, rotate, blur, flip and flash, fly out, blinds) and professional templates.
WOW Slider comes with an installation wizard that allows you to create fantastic sliders in seconds without having to understand code or edit images. Versions of the plugin for Joomla and WordPress are also available for download:
- Fully responsive;
- Supports all browsers and all types of devices;
- Support touch devices;
- Easy installation on WordPress;
- Flexibility in configuration;
- SEO-optimized.
Demo |Download
Nivo Slider – free jQuery plugin
Nivo Slider known all over the world as the most beautiful and easy to use image slider. The Nivo Slider plugin is free and released under the MIT license:
- Requires JQuery 1.7 and above;
- Beautiful transition effects;
- Simple and flexible to configure;
- Compact and adaptive;
- Open source;
- Powerful and simple;
- Several different templates;
- Automatic image cropping.
Demo |Download
Simple jQuery slider with technical documentation
The idea was inspired by Apple's sliders, in which several small elements can fly out with different animation effects. The developers tried to implement this concept taking into account minimum requirements for creating simple design an online store in which the “flying” elements represent various categories:
- Adaptive layout;
- Minimalistic design;
- Various drop-out and slide changing effects.
Demo |Download
Full size jQuery image slider
A very simple slider that occupies 100% of the page width and adapts to the screen sizes of mobile devices. It works with CSS transitions, and images are "stacked" along with anchors. The anchor can be replaced or removed if you do not want to attach a link to the image.
When installed, the slider expands to 100% of the screen width. It can also automatically reduce the size of slide images:
- Adaptive JQuery slider;
- Full size;
- Minimalist design.
Demo |Download
Elastic Content Slider + tutorial
Elastic Content Slider automatically adjusts width and height based on dimensions parent element. This is a simple jQuery slider. It consists of a slide area at the top, and a navigation tab bar at the bottom. The slider adjusts its width and height according to the dimensions of the parent container.
When viewed on small diagonal screens, the navigation tabs turn into small icons:
- Adaptive design;
- Mouse click scrolling.
Demo |Download
Free 3D Stack Slider
An experimental slider that scrolls through images in 3D. The two stacks resemble stacks of paper, from which, when scrolled, images are displayed in the center of the slider:
- Adaptive design;
- Flip - transition;
- 3D effects.
Demo |Download
Fullscreen Slit Slider based on JQuery and CSS3 + tutorial
This tutorial will show you how to create a slider with a twist: the idea is to “cut” and display the current slide as you open the next or previous image. Using JQuery and CSS animation, we can create unique transition effects:
- Adaptive design;
- Split transition;
- Full screen slider.
Demo |Download
Unislider - a very small jQuery slider
No unnecessary bells and whistles, less than 3KB in size. Use any HTML code for your slides, extend it with using CSS. Everything related to Unslider is hosted on GitHub:
- Support for various browsers;
- Keyboard support;
- Height adjustment;
- Adaptive design;
- Touch input support.
Demo | Download
Minimal Responsive Slides
Simple and compact plugin ( size is only 1 KB), which creates a responsive slider using elements inside a container. ResponsiveSLides.js works with big amount browsers, including all versions of IE from IE6 and higher:
- Fully responsive;
- Size 1 KB;
- CSS3 transitions with the ability to run via JavaScript;
- Simple markup using bulleted lists;
- Ability to customize transition effects and viewing duration of one slide;
- Supports the ability to create multiple slide shows;
- Automatic and manual scrolling.
Demo |Download
Camera - free jQuery slider
Camera is a plugin with many transition effects, adaptive layout. Easy to set up, supported by mobile devices:
- Fully responsive design;
- Signatures;
- Ability to add videos;
- 33 different color icons.
Demo |Download
SlidesJS, responsive jQuery plugin
SlidesJS is adaptive plugin for JQuery (1.7.1 and higher) with support for touch devices and CSS3 transitions. Experiment with it, try a few ready-made examples that will help you figure out how to add SlidesJS to your project:
- Adaptive design;
- CSS3 transitions;
- Support for touch devices;
- Easy to set up.
Demo | Download
BX Jquery Slider
This is a free responsive jQuery slider:
- Fully responsive – adapts to any device;
- Horizontal, vertical slide change;
- Slides can contain images, videos or HTML content;
- Expanded support for touch devices;
- Using CSS Transitions for Slide Animation ( hardware acceleration);
- API callbacks and completely public methods;
- Small file size;
- Easy to implement.
Demo |Download
FlexSlider 2
The best responsive slider. The new version has been improved to increase speed and compactness.
Demo | Download
Galleria - JavaScript-based responsive photo gallery
Galleria is used on millions of websites to create high-quality image galleries. The number of positive reviews about her work is simply off the charts:
- Completely free;
- Full screen viewing mode;
- 100% adaptive;
- No programming experience required;
- Support for iPhone, iPad and other touch devices;
- Flickr, Vimeo, YouTube and more;
- Several topics.
Demo | Download
Blueberry - a simple responsive jQuery image slider
I present to you a jQuery image slider written specifically for responsive web design. Blueberry is an experimental open-source image slider plugin source code, which was written specifically to work with responsive templates:
- Minimal design;
- Adaptive layout;
- Presentations.
Demo | Download
jQuery Popeye 2.1
Standard elements of the first version of the program are used: the slider hides to the left and pops up to the right. The same navigation elements and captions that pop up on mouseover:
- Adaptive design;
- Signature support;
- Slide show mode.
Demo | Download
FractionSlider - free jQuery slider plugin with parallax effect
Try this amazing plugin. Animation of several elements when displaying images with settings for each of them. FractionSlider is a jQuery plugin for images or text. It allows you to animate multiple slide elements at once. You can install various methods animations, such as changing frames or moving in a certain direction:
- Adaptive design;
- Animation of elements;
- Manage animation settings;
- Background animation.
Demo |Download
Free Responsive Image Slider with Guide
With FlexSlider we can compose the slider code with " impressionistic» interface. The plugin allows you to add functionality and styles via CSS3. I hope you enjoy it and use it in your projects. Let's list its functions:
- Adaptive design;
- Fade effects;
- Arrows left, right;
- Green buttons.
Demo |Download
Sequence is a free plugin with CSS3 transitions.
It comes with four themes, and only the most sophisticated ones, such as the Apple-style slider and the horizontal parallax slider, are not responsive:
- Three free themes;
- Sliding horizontal parallax;
- Apple style;
- Adaptive themes;
- Support for touch devices;
- Easy modification;
- Support for different browsers.
Good bad
