Responsive css3 slider with arrows. Responsive slider without Javascript on CSS3
I will not open America to anyone, I will not surprise the public with a new trick and I will not blow the brains of those who swim in CSS3 like a scuba diver. Here's an easy way to create a slider using simple CSS3 functions without the need for javascript.
1. Laying out the foundation
To implement the slider, we need a fairly simple set of tags, which in turn will be responsible for the elements of the slider.
Here we see that the general “wrapper” block contains a “slider” block with 5 slides, inside which you can place any html code that will be placed on the slide. There are radio buttons in front of the general block, which will later be hidden in order to create their own slide navigation bar for them, with which the labels in the “controls” block will help us.
2. Designing the slider
This is where we stop and take a look at the css. Please note that some properties are prefixed with cross-browser prefixes so that all modern browsers could understand them.* ( margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box ; ) body ( background-image: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png); )
With the design of the background and general styles, everything is clear.
Wrapper ( height: 350px; margin: 100px auto 0; position: relative; width: 700px; ) .slider ( background-color: #ddd; height: inherit; overflow: hidden; position: relative; width: inherit; -webkit- box-shadow: 0 0 20px rgba(0, 0, 0, .5); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5); -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5); box-shadow: 0 0 20px rgba(0, 0, 0, .5); )
The general block and the slider block have the same dimensions to perfectly control the position of the slider on the page. While there are no slides, we temporarily painted the slider in light gray.
Wrapper > input ( display: none; )
Hide the radio buttons. We will need them later.
Result on this moment such:
3. Decorate the slides
Here we will write general styles for slides and each slide separately:Slides ( height: inherit; position: absolute; width: inherit; ) -image: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); ) .slide3 ( background-image: url(http://habrastorage.org/files/663/6b1/ d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); ) .slide4 ( background-image: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); ) .slide5 (background-image: url( //habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); )
For all slides, we have specified absolute positioning so that we can play with appearance effects. The sizes of the slides are taken from the size of the slider itself, so that they do not have to be written in several places.
4. Making slide navigation
Since the radio buttons are hidden and we need them as switches, we make out the prepared labels:Wrapper .controls ( left: 50%; margin-left: -98px; position: absolute; ) .wrapper label ( cursor: pointer; display: inline-block; height: 8px; margin: 25px 12px 0 16px; position: relative; width: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; ).wrapper label:after ( border: 2px solid #ddd; content: " "; display: block; height: 12px; left: -4px; position: absolute; top: -4px; width: 12px; -webkit-border-radius: 50%; -moz-border -radius: 50%; -o-border-radius: 50%; border-radius: 50%; )
We make navigation classic. Each button is an area in the form of a circle, inside which, when the slide is active, the empty area is partially colored. So far we have the following result:
5. Learning to press buttons
It's time to teach the slider to switch slides by clicking on a certain button:Wrapper label ( cursor: pointer; display: inline-block; height: 8px; margin: 25px 12px 0 16px; position: relative; width: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50 %; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: background ease-in-out .5s; -moz-transition: background ease-in-out .5s; -o- transition: background ease-in-out .5s; transition: background ease-in-out .5s; ) .wrapper label:hover, #slide1:checked ~ .controls label:nth-of-type(1), #slide2: checked ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4) , #slide5:checked ~ .controls label:nth-of-type(5) ( background: #ddd; )
In the decorated navigation buttons, we add smooth coloring inside them. We also add conditions under which the active button and the button on which the cursor is hovered will be smoothly colored. Our custom radio buttons are ready:
6. Animate the slider
Well, now we make it so that the slides are finally switched:Slides ( height: inherit; opacity: 0; position: absolute; width: inherit; z-index: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale (1.5); transform: scale(1.5); -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s; -moz-transition: transform ease-in-out .5s, opacity ease -in-out .5s; -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s; transition: transform ease-in-out .5s, opacity ease-in-out .5s; ) #slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:checked ~ .slider > .slide4, #slide5:checked ~ .slider > .slide5 ( opacity: 1; z-index: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale( one); )
We add properties to the general slide styles that make all slides invisible and fade into the background. We also added a slight magnification to the slides while they are invisible to give an interesting appearance in the slider.
The result can be viewed here.
With the development of CSS3, layout options are growing exponentially. More and more functionality can be implemented on "pure" CSS. This post shows the development process interactive a cyclic slider without a single line of JavaScript. Automatic rotation, selection of any slide with a smooth transition - on "pure" CSS. Example in action
General information.
Standards and prefixes
The transition, animation and transform properties have long been implemented in one form or another in all popular browsers. On June 6, 2012, the W3C announced that this part of the upcoming CSS 3.0 standard would not change dramatically, and recommended that all browsers implement it today.For front-end developers, this means a standard to build on. Now you don't have to be afraid that in the future some browser will abandon its prefix non-standard property - after all, it will be duplicated by a standard property and replace it if necessary.
Legacy Versions Internet Explorer, which will soon include even version 9, do not support transition, animation and transform in any form. But their share is still more than 10%. For IE7-9, a js-"stub" is offered, and the effect of smooth switching between slides is nothing.
Why CSS and not JS?
There are many problems that can be solved with CSS help: interactive galleries, multi-level drop-down menus, construction and animation of three-dimensional diagrams ... Why use CSS when you can do everything in JS, especially considering the mass of ready-made developments? The main arguments can be: - In most cases, CSS effects are faster because they are handled exclusively by browser engines. This is especially noticeable on mobile devices.
- To implement the task, knowledge of JS and, in general, any programming languages is not required. Editing CSS, as a rule, is available even to an ordinary user. Moreover, “breaking firewood” in CSS is much more difficult than in JS.
Implementation
BEM
So, for naming CSS classes, the Block Element Modifier (BEM) methodology was used. The bottom line is that the layout is based on the layout of the page from independent blocks. According to BEM, a block can have elements, but only inside the block.Slider classes:
.slider /* Block containing the image feed */ .slider__radio /* Radio button */ .slider__item /* Slide */ .slider__img /* Image inside the slide */ .slider__number-list /* Container with toggle buttons */ .slider__number /* Button to enable the associated slide */ .slider__number-after /* implemented to support IE7 and IE8, which do not support the :after and::after pseudo-elements respectively */ .slider_count_X /* A modifier that specifies the number of X slides */
Animation
The keyframe animation sequence for the three slides looks like this:@keyframes slider__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% (opacity:0;) 100%(opacity:0;) )
The peculiarity of the slider implementation is that the same animation is assigned to all slides and all buttons:
slider_count_3 .slider__item, slider_count_3 .slider__number-after ( -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 ; )
This approach allows you to seriously reduce the amount of code, because all animations still have to be duplicated with their prefix versions (@-webkit-keyframes, @-moz-keyframes and @-o-keyframes ), and each such “stack” of rules must be separately described for each required (customer) number of slides. If we separately describe the animation for each slide, then the amount of code can be tens of kilobytes.
To avoid this, but consistently animate all slides and buttons using one animation, it is enough to set the offset of the start of the animation in time for each pair of slide + button:
.slider__item:nth-of-type(2), .slider__number:nth-of-type(2) > .slider__number-after ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o- animation-delay:5s; animation-delay:5s; ) .slider__item:nth-of-type(3), .slider__number:nth-of-type(3) > .slider__number-after ( -moz-animation-delay:10s ; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; ) ...
For the first pair, the default value remains - zero offset.
It is also important that the offset does not depend on the number of slides, and can be described once for their maximum number.
As a result, a smooth animated transition between slides looks like this:
Pause on hover
For the case when the user wants to pause the slide on the screen, but does not want to turn off the rotation, you can use the pause mode when you hover over the slide:.slider:hover .slider__item, .slider:hover .slider__number-after ( -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation -play-state: paused; )
Switch on click
There is whole line CSS "events" that switch the state of the html element. If we talk about a mouse click, then this is the appearance of the :focus, :target, or :checked pseudo-classes on one of the page elements. The :focus pseudo-class can have no more than one element per page at a time; pseudo-class:target pollutes the browser's history and requires an "a" tag; the pseudo-class:checked remembers the state before leaving the page, plus, in the case of radio buttons, it is a discrete switch, when only one element of a particular group can be selected - that's what you need..slider__radio (styles for the unselected radio button) .slider__radio:checked (styles for the selected radio button)
In selectors below level 4, you can switch the state of an arbitrary element (for example, the opacity of a slide) only in conjunction with a radio button, using the + and ~ neighbor selectors. You can switch between the styles of the neighbor and the styles of the neighbor's children, but in any case, the neighbor must be after the radio button.
/* Style of first slide in unselected state */ .slider__radio:nth-of-type(1) ~ .slider__item:nth-of-type(1) ( opacity: 0.0; ) /* Style of first slide in state " selected" */ .slider__radio:nth-of-type(1):checked ~ .slider__item:nth-of-type(1) ( opacity: 1.0; )
Switching the opacity of the slide was used - the container that contains the image. It's over universal way than toggling the properties of an image, since a div container, unlike an empty img element, can contain any additional information (for example, the title of a slide, or a related description, including links).
Transition properties are specified for slides, which allow you to make switching between them smooth.
.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; )
Stop rotation when selecting a slide
When the user selects any slide, it is necessary to stop the animation of all slides and buttons. This is due to the fact that the priority of the property values of a running animation is always higher than all other values of the same properties (you can even override inline properties with!important).Since each slide has an animation, albeit the same in structure, and you need to turn off the animation of all slides (otherwise three slides will participate in a smooth transition), all radio buttons must be placed before the first slide.
...
Moreover, all buttons (radio button labels) must be grouped in a separate block and placed after the radio buttons, otherwise there may be problems with the universal positioning of labels for an arbitrary number of slides.
Stopping the animation of all slides and buttons when any slide is selected is set as follows:
.slider__radio:checked ~ .slider__item, .slider__radio:checked ~ .slider__number-list > .slider__number-after ( opacity: 0.0; -moz-animation: none; -webkit-animation: none; -o-animation: none; animation: none;)
Arbitrary number of slides
It is impossible to make a universal slider for any number of slides, because each number requires its own "stack" of CSS animation rules. Each such “stack” (if it is described) can be connected through the slider block modifier:.slider_count_X
where X is the number of slides.
To support some older browsers, the first slide is not animated. For this reason, the container of the first image always has an opacity of 1.0. A problem arises: when the other two slides smoothly switch between themselves, the first one shines through (this can also be the background of the parent of the slider block). To remove the see-through effect, a transition-delay is set for all slides except the selected one; for the selected one, the z-index is set higher than for all the others:
.slider__item ( opacity: 1.0; position: relative; -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__radio:nth-of-type(1):checked ~ .slider__item:nth-of-type(1), .slider__radio:nth-of-type(2):checked ~ .slider__item: nth-of-type(2), .slider__radio:nth-of-type(3):checked ~ .slider__item:nth-of-type(3), .slider__radio:nth-of-type(4):checked ~ . slider__item:nth-of-type(4), .slider__radio:nth-of-type(5):checked ~ .slider__item:nth-of-type(5)( -moz-transition: opacity 0.2s linear; -webkit- transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; z-index: 6; )
So that the slides do not conflict with other elements of the site (for example, do not overlap the drop-down menu with a z-index less than or equal to 6), we create our own context (stacking context) for the block by setting the minimum z-index required for visibility:
.slider( z-index: 0; )
so
Even today, without programming skills and specialized libraries, before its final standardization, CSS 3.0 allows you to implement complex and interesting tasks. The described interactive slider, at the moment, is fully functional for 80% of Runet users. For most of the remaining users, namely for users of IE7-9 browsers, you can use js-"stub", which implements the main functionality of the slider.A working example can be seen
collection of free HTML and CSS slider code examples: card, comparison, fullscreen, responsive, simple, etc. Update of June 2018 collection. 7 new items.
Table of Contents
related articles
🔥 All new CSS sliders in this video (2019)
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 layers 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
Jul 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 Gorgulu
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
Full Screen Sliders
About the code
Simple slider based on radio inputs. 100% pure HTML + CSS. Works also with arrow keys.
Responsive: yes
Dependencies:-
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 Opacity Slider
Image opacity slider in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies:-
About the code
Stacked Flexible Slides Layout
This example illustrates how to create a layout of slides stacked on each other (especially useful for fade in/out transitions). It "s achieved without setting their height and avoiding position: absolute; so they are fully flexible and easy to keep in normal page flow.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies:-
About the code
Responsive Slider
Animated responsive slider in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: animate.css
About the code
Slider With Masked Text
CSS only slider with masked text.
Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari
Responsive: yes
Dependencies:-
About the code
Image and content with parallax effect.
About the code
CSS only slide gallery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies:-
About the code
Pure HTML/CSS Slider
Pure HTML/CSS slider with circular SVG progress bar.
Compatible browsers: Chrome, Edge (partial), Firefox (partial), Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
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 animation 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 Zoric
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 Jurgen 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 Darby Brown
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
Multi Axis Image Slider
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
Slider without the use of JavaScript with a cool slide flip effect. Perfectly adapts to any device. Sources available.
Feature: CSS slider
A pure CSS slider is a ready-made slider with automatic switching slides without the help of JS scripts. As a rule, this kind of sliders is appreciated by novice developers or in the case when there is no possibility / need to include libraries.
Of course, it is easier to use special plugins for creating sliders (there are a lot of them, on the same jQuery). But this slider seduces with its unusual effect of flipping through slides. Moreover, with high performance.
How to use this example on your site
From the link above, you can download the archive, which will contain the slider-css.html file. In theory, everything you need to run a CSS slider on your site is in this file. Here is your algorithm of actions:
1. Copy all the styles of the slider block, they are in the tag
|
Note that the .untitled container has position: absolute and you may need to adapt it a bit.
2. All slides are wrapped in
< div class = "untitled" > < div class = "untitled__slides" > . . . < / div > < / div > |
3. The HTML code of the slide itself is easy to understand
< div class = "untitled__slide" > < div class = "untitled__slideBg" > < / div > < div class = "untitled__slideContent" > < span >London< / span > < span >Scout< / span > < a class = "button" href = "https://unsplash.com/@scoutthecity" target = "/black" > Unsplash Profile< / a > |
Working on a book about jQuery, I came across the fact that many of my subscribers asked me to tell in it how to write a slider script in jquery. Sorry, dear friends! In the yard of the XXI century and, fortunately, we have access to all the delights of CSS3, allowing us to implement such things without a single line javascript.
Part 1.
To begin with, I will explain to those who do not know what a slider is. Slider- this is a block of a certain width that occupies part of the web page, or its entirety. Its main feature is in the content changing automatically or manually. The content can be both graphic images and some text.
Of course, you may ask: why reinvent the wheel when there are a lot of slider implementations in javascript? Here are my arguments:
- CSS effects work faster. This is clearly visible on mobile devices.
- No programming skills are required to create a slider.
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 the same size. Also, I forgot to tell you, our slider will be adaptive (yes, yes, Adaptive layout, you read that right) and you can use it in any of your projects for any device. But, enough chatter, my hands are already itching to write mega-code. Let's start with HTML:
I left the alt attribute empty to save space, but you can fill it yourself based on your SEO requests and to inform users who have disabled images in the browser. I also want 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, the width is 80% of the window, and the max-width is the size of each individual photo (1000 pixels in our example), because we don't want the image to be stretched:
Slider ( width: 80%; max-width: 1000px; )
In our CSS code, figure's width 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 renders just one, the width of the figure is increased five times, which is 500% of the width of the container div:
The font-size: 0 setting blows all the air out of the figure, removing white space around and between the images. position: relative makes it easy to move the figure during the animation.
We need to split the photos equally within the image strip. The formula is very simple: if we assume figure is 100% wide, each image should take up 1/5 of the horizontal space:
There is a need to use the following CSS rule:
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 width of the container div is 100%, each movement of the image strip to the left will be measured as a percentage of that distance:
@keyframes slidey ( 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 wrapped in a div and will move 5%.
Slider figure ( position: relative; width: 500%; animation: 30s slidy infinite; font-size: 0; padding: 0; margin: 0; left: 0; )
Part 2.
We made a mega-cool slider without javascript. And let's, before we go to rest on our laurels, add control buttons to it. More precisely, not into it (I'm already too lazy to mess with it), but let's create a new one.
So our HTML code is:
Now let's take care of the animation of our slides. Unfortunately, for a different number of slides, it will be different:
/* for a two-slide slider */ @keyframes slider__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100%( opacity:0;) ) /* for a three-slide slider */ @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 five-slide slider */ @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. You can see the code for more sites 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; ) .item: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 that the slides do not change when the user hovered 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, we can use the :focus , :target , or :checked pseudo-classes on one of the page elements. The :focus pseudo-class can only have one element per page, :target pollutes the browser's history and requires the tag; the :checked pseudo-class 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 use this. Insert before
And then
/* Style the sliders in the "not selected" state */ .slider .item ~ .item ( opacity: 0.0; ) /* Style the 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 toggling the opacity property of the container slide with the picture. This is due to the fact that in a div container, unlike the img element, you can put any additional information (for example, the title of a slide). 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 any slide is selected 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 don't animate the first slide by setting it to opacity: 1.0 , but we have a problem when we smoothly switch the other two slides between each other, the first slide will show through. To eliminate this bug, set the transition-delay for all slides except the selected one, and for it we will make the z-index higher than for 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; z-index: 6; )
So that the slides do not conflict with other elements of the site (for example, do not overlap the drop-down menu with a z-index less than or equal to 6), we create our own context for the block
