An interesting and at the same time simple slider on pure CSS3

I will not open anyone to America, I will not surprise the public with a new focus and I will not blow the brains of those who swim like a scuba diver in CSS3. I'll tell you a simple way to create a slider using simple CSS3 functions without having to use javascript.

1. We make the foundation

To implement the slider, we need a fairly simple set of tags, which will in turn be responsible for the elements of the slider.

<div class="wrapper"> <input type="radio" name="point" id="slide1" checked> <input type="radio" name="point" id="slide2"> <input type="radio" name="point" id="slide3"> <input type="radio" name="point" id="slide4"> <input type="radio" name="point" id="slide5"> <div class="slider"> <div class="slides slide1"></div> <div class="slides slide2"></div> <div class="slides slide3"></div> <div class="slides slide4"></div> <div class="slides slide5"></div> </div> <div class="controls"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label> <label for="slide5"></label> </div> </div> 

Here we see that the general block "wrapper" contains a block "slider" with 5 slides, inside which you can put any html-code that will be located on the slide. In front of the common block there are radio buttons that will later be hidden to create for them their own slide navigation bar, with which the labels in the “controls” block will help us.

2. We make a slider

Here we will stop and consider css a little. Please note that for some properties there are cross-browser prefixes, so that all modern browsers can 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 background design 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 common block and the block with the slider are the same size to perfectly control the position of the slider on the page. While there are no slides, we have temporarily painted the slider in a light gray color.

 .wrapper > input { display: none; } 

Radio buttons are hidden. We need them later.

The result at the moment is:

3. We make slides

Here we prescribe the general styles for the slides and each slide separately:

 .slides { height: inherit; position: absolute; width: inherit; } .slide1 { background-image: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); } .slide2 { background-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(http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); } 

For all slides, we have specified absolute positioning so that you can play with appearance effects. Slide sizes are taken from the size of the slider itself, so as not to have to register them in several places.

4. We do navigation on slides.

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 represents an area in the form of a circle, inside which, with the active slide, an empty area will partially become colored. In the meantime, we have the following result:

5. We learn to push buttons

It's time to teach the slider to switch slides by pressing 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 add smooth coloring inside them. We also add conditions under which the active button and the button on which the cursor is positioned will be smoothly colored. Our own radio buttons are ready:

6. Animate the slider

Well, now we are doing so that the slides finally switch:

 .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(1); } 

In general slide styles, we add properties in which all slides are invisible and go to the background. We also added a slight increase in the slides, while they are invisible to give an interesting appearance in the slider.

Next, we attribute the condition under which, depending on the active navigation button, the required slide appeared in the slider window.

The result can be seen here: slider demo .

Total

Slider does not require js. Let him not know how to switch himself, but anyone who knows the basics of CSS, transition and transform, it will be easy to come up with their own effects to switch slides.

PS Based on the slider from “Sorax”, which I redid in my own way.