Html

With the advancement of CSS3, layout capabilities are growing exponentially. More and more functionality can be implemented in pure CSS. This post shows the development process interactive a looping slider without a single line of JavaScript. Automatic rotation, selection of any slide with a smooth transition - in "pure" CSS... An 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 developed CSS 3.0 standard would not radically change, and recommended that all browsers implement it today.

For front-end developers, this means a standard to build upon. Now there is no need to be afraid that in the future any browser will abandon its prefix non-standard property - after all, it will be duplicated by the standard property and replace it if necessary.

Obsolete Internet versions Explorer, which will soon include even version 9, does 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 tasks that can be solved by CSS help: interactive galleries, multi-level drop-down menus, building and animating 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 as follows:

• In most cases, CSS effects work faster, since their execution is monitored exclusively by browser engines. This is especially true on mobile devices.
• To implement the task, knowledge of JS and, in general, any programming languages ​​is not required. Editing the same CSS, as a rule, is available even to an ordinary user. Moreover, "breaking the wood" 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 a block.

Slider classes:
.slider / * Block containing the image feed * / .slider__radio / * Radio button * / .slider__item / * Slide * / .slider__img / * Picture inside the slide * / .slider__number-list / * Container with toggle buttons * / .slider__number / * The button to enable the associated slide * / .slider__number-after / * is implemented to support IE7 and IE8, which do not support the: after and :: after pseudo-elements, respectively * / .slider_count_X / * Modifier that determines the number of slides X * /

Animation

The keyframe 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-3: autoplay_count 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 described separately for each required (by the customer) number of slides. If we describe the animation separately 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 animation start offset in time for each slide + button pair:
.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 rotation, you can use the pause mode by hovering 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;)

Click toggle

There are a number of CSS "events" that trigger state 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; the: target pseudo-class litters the browser history and requires the "a" tag; The: checked pseudo-class remembers the state before leaving the page, plus, in the case of radio buttons, it is a discrete toggle when only one element of a particular group can be selected - what is needed.
.slider__radio (unselected radio button styles) .slider__radio: checked (selected radio button styles)

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 neighbor selectors + and ~. You can switch both the styles of the neighbor and the styles of the descendants of the neighbor, but in any case, the neighbor must be after the radio button.
/ * Style of the first slide in the “not selected” state * / .slider__radio: nth-of-type (1) ~ .slider__item: nth-of-type (1) (opacity: 0.0;) / * Style of the first slide in the “ selected "* / .slider__radio: nth-of-type (1): checked ~ .slider__item: nth-of-type (1) (opacity: 1.0;)
We used to switch the opacity of the slide - the container that contains the picture. It's over universal way rather than toggling the properties of the image, since in a div container, unlike an empty img element, you can put any Additional information(for example, slide title, or related description, including links).
For slides, transition properties are specified, which allow you to make the transition 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 on slide selection

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 the running animation is always higher than all other values ​​of the same properties (you can even interrupt inline properties with! Important).

Since there is animation, albeit the same in structure, for each slide, and you need to turn off the animation of all slides (otherwise, in smooth transition three slides will participate), 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 you select any slide 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 create 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 via 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 picture always has an opacity of 1.0. A problem arises: when the other two slides are smoothly switching between each other, the first one shines through (this may also be the background of the parent of the slider block). To remove the transillumination effect, a transition-delay is set for all slides, except for 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 site elements (for example, do not overlap a drop-down menu with a z-index less than or equal to 6), we create our own stacking context for the block by setting the minimum z-index required for visibility:
.slider (z-index: 0;)

so

Already 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, on this moment, fully functional for 80% of users of the Russian Internet. For most of the remaining users, namely for users of IE7-9 browsers, you can use the js "stub", which implements the main functionality of the slider.

A working example can be seen

March 3, 2015 at 06:15 PM

An interesting and at the same time simple slider on pure CSS 3

• Website development,
• CSS,
• Html

I won't open America to anyone, I won't surprise the audience with a new trick, and I won't blow the mind of those who swim like a scuba diver in CSS3. I will tell you an easy way to create a slider using simple functions CSS3 without the need for javascript.

1. Layout the basis

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

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 located on the slide. In front of the general block there are radio buttons, which will later be hidden to create their own slide navigation bar for them, with which the labels in the "controls" block will help us.

2. We design the slider

Here we will stop and take a little look at css. Note that some properties are cross-browser prefixed 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 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 a slider have the same size to perfectly control the position of the slider on the page. While there are no slides, we temporarily painted the slider in a light gray color.

Wrapper> input (display: none;)
Hide the radio buttons. We'll need them later.

Result on this moment such:

3. Designing the slides

Here we will write general styles for 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 /.jpg);) .slide4 (background-image: url (http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg);) (background-image: url //habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg);)
We have specified absolute positioning for all slides so that we can play with the appearance effects. The dimensions of the slides are taken from the size of the slider itself, so that you do not have to write them in several places.

4. Making slide navigation

Since the radio buttons are hidden and we need them as switches, we design 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, when the slide is active, the empty area will be partially colored. In the meantime, we have the following result:

5. Learning to push buttons

It's time to teach the slider to switch slides by clicking on a specific 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 a smooth coloring inside them. We also add conditions under which active button and the button you hovered over will fade in color. Our own radio buttons are ready:

6. Animating the slider

Well, now we make it 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 ( one); )
In general slide styles, we add properties that make all slides invisible and fade into the background. We also added a slight zoom to the slides while they are invisible to give an interesting appearance in the slider.

The result can be viewed here.

CSS sliders have some advantages over Javascript sliders. One such advantage is download speed. Not only are slider images used 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 pure CSS sliders.

Here's what I found on the site about sliders:

1. CSS3 image slider

A CSS slider that uses radio buttons to navigate through slides. These radio buttons are located under the sliders. Also, in addition to the radio buttons, navigation is carried out using the arrows on the left and right. To keep track of which image is currently displayed, the: checked pseudo-classes are used.

2. CSS3 thumbnail image slider

Unlike the previous CSS slider, here, instead of radio buttons, there are thumbnails of all images at the bottom, which is also useful when creating an image gallery. The images change with a peculiar effect: they smoothly disappear when enlarged.

3. CSS gallery

But this CSS slider is perfect for sales pages. As a rule, many web developers, when developing landing pages (selling pages), place a slider at the very beginning so that in the first screen (without scrolling) the visitor can immediately see all the benefits that this page has for him. Above all, this slider is responsive, which is also great.

4. CSS slider without links

Just want to note that this slider does not use links! By default, besides the main image (slide), 2 more slides are visible. They are located behind the main one. Changing slides takes place in a beautiful mode: first, two slides are moved apart and that slide becomes in the center, which then becomes the main one. Then the slide is enlarged and placed in front of the others.

5. Responsive CSS3 Slider

Another responsive slider with radio button controls. To see how this slider will look on different devices ah - 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 the slider will look on your computer, tablet or smartphone.

*** BONUS SLIDER ***

In addition to all the sliders that are presented above, I want to please you with one more. This slider is perfect for creating an image gallery. Words cannot explain what he does, so you better watch everything on the video:

1. Excellent jQuery slideshow

A large effective slideshow using jQuery technologies.

2. jQuery plugin "Scale Carousel"

Scalable slideshow using jQuery. You will be able to set the dimensions for the slideshow that suit you best.

3. jQuery plugin "slideJS"

Image slider with text description.

4. Plugin "JSliderNews"

5.CSS3 jQuery slider

When you hover over the navigation arrows, a circular thumbnail of the next slide appears.

6. Nice jQuery "Presentation Cycle" slider

jQuery slider with an indicator of loading images. There is an automatic change of slides.

7. jQuery "Parallax Slider" plugin

Slider with 3D background effect. The highlight of this slider is the background movement, which is composed of several layers, each of which scrolls with different speed... The result is an imitation of the volumetric effect. It looks very nice, you can see for yourself. The effect is displayed more smoothly in browsers such as: Opera, Google chrome, IE.

8. Fresh, lightweight jQuery slider "bxSlider 3.0"

On the demo page in the "examples" section you can find links to all possible options using this plugin.

9.jQuery Image Slider, "slideJS" Plugin

Stylish jQuery slider will certainly be able to decorate your project.

10. jQuery plug-in slideshow "Easy Slides" v1.1

Easy to use jQuery plugin for creating slideshows.

11. Plugin "jQuery Slidy"

Lightweight jQuery plugin in various designs. There is an automatic change of slides.

12.jQuery CSS gallery with automatic slide changer

If the visitor does not click on the "Forward" or "Back" arrows within a certain period of time, the gallery will start scrolling automatically.

13. jQuery Nivo Slider

Very professional quality lightweight plugin with valid code... There are many different slide transition effects.

14. jQuery "MobilySlider" slider

Fresh slider. jQuery slider with various image changing effects.

15. jQuery Slider² Plugin

Lightweight slider with automatic slide change.

16. Fresh javascript slider

Slider with automatic image change.

Plugin to implement slide show with automatic slide change. It is possible to control the display using thumbnail images.

jQuery CSS image slider using the NivoSlider plugin.

19. jQuery jShowOff slider

Plugin for content rotation. Three use cases: no navigation (with automatic change in slideshow format), with navigation in the form of buttons, with navigation in the form of thumbnails.

20. Plugin "Shutter Effect Portfolio"

Fresh jQuery plugin for photography portfolios. The gallery has an interesting effect of changing images. Photographs follow each other with an effect similar to the operation of a lens shutter.

21. Lightweight javascript CSS slider "TinySlider 2"

Implementing an image slider with using javascript and CSS.

22. Awesome slider "Tinycircleslider"

Stylish round slider. The transition between images is carried out by dragging along the circumference of the slider in the form of a red circle. Will fit perfectly into your site if you use round elements in your design.

23. jQuery image slider

Lightweight Slider Kit. The slider is presented in different versions: vertical and horizontal. Various types of navigation between images are also implemented: using the "Forward" and "Back" buttons, using the mouse wheel, using a mouse click on a slide.

24. Gallery with miniatures "Slider Kit"

Gallery "Slider Kit". Thumbnail scrolling is carried out both vertically and horizontally. The transition between images is carried out using: mouse wheel, mouse click or hovering over a thumbnail.

25. jQuery Slider Kit Content Slider

JQuery vertical and horizontal content slider.

26. jQuery Slider Kit Slideshow

Slideshow with automatic slide change.

27. Lightweight professional javascript CSS3 slider

A neat jQuery and CSS3 slider created in 2011.

jQuery thumbnail slideshow.

29. A simple jQuery slideshow

Slideshow with navigation buttons.

30. Awesome jQuery "Skitter" slideshow

jQuery plugin "Skitter" for creating stunning slideshows. The plugin supports 22 (!) Kinds of various animation effects when changing images. Can work with two slide navigation options: slide numbers and thumbnails. Be sure to watch the demo, a very high quality find. Technologies used: CSS, HTML, jQuery, PHP.

31. Slideshow "Awkward"

Functional slideshow. In the form of slides can be: simple images, images with captions, images with tooltips, video clips. You can navigate using the arrows, slide number links, and the left / right keys on your keyboard. The slideshow is made in several versions: with and without miniatures. To see all the options, follow the links Demo # 1 - Demo # 6 located at the top of the demo page.

Very original design of the image slider, reminiscent of a fan. Animated slide change. Navigation between images is carried out using arrows. There is also an automatic changeover, which can be turned on and off using the Play / Pause button located at the top.

Animated jQuery slider. Background images are automatically scaled when the browser window is resized. For each image, a block with a description pops up.

34. "Flux Slider" slider in jQuery and CSS3

New jQuery slider. Several cool animated effects when changing slides.

35. jQuery jSwitch plugin

Animated jQuery gallery.

Easy slideshow in jQuery with automatic slide change.

37. New version of plugin "SlideDeck 1.2.2"

Professional content slider. There are options with automatic slide change, as well as an option using the mouse wheel to move between slides.

38. jQuery Sudo Slider

Lightweight image slider in jQuery. There are a lot of implementation options: horizontal and vertical image change, with and without references to the slide number, with and without image captions, various image change effects. There is an automatic slide change function. Links to all implementation examples can be found on the demo page.

39. jQuery CSS3 slideshow

Thumbnail slideshow supports automatic slide change mode.

40. jQuery Flux Slider

Slider with many effects for changing images.

41. Simple jQuery slider

Stylish jQuery image slider.

I want to tell you a simple way to create a slider, without using JS, using CSS animation.

1) First, let's write HTML, suppose that 4 images will replace each other in the slider.

2) Next, we will arrange the size of the block, and a few more settings, position: relative is necessary in order to create a formatting context, then it will be clear why.

Slider (width: 500px; height: 300px; margin: auto; margin-top: 25px; border: 1px solid black; position: relative; overflow: hidden;)
3) Let's also define some properties for the slides themselves:

Slide (width: 500px; height: 300px; position: absolute; top: 0; left: 0;)
As you can see from the CSS, we place all slides in the upper left corner of the slider, thus giving the same initial position.

1. The slide is in its original position, shown to the user

2. The slide moves to the left until it completely goes beyond the border of the slider (the slider, as mentioned above, has overflow: hidden, so the slide does not run over the surrounding objects).

5. The slide goes down one level with the slider

6. The slide moves to its original position
In other words (for now I will name the frames according to the numbers from the list above):

@keyframes slide (from (top: 0; left: 0;) 1 (transform: translate (0px, 0px);) 2 (transform: translate (-500px, 0);) 3 (transform: translate (-500px, 300px );) 4 (transform: translate (500px, 300px);) 5 (transform: translate (500px, 0);) to (transform: (0px, 0px);))
5) So, it became clear what the path of the slide looks like. Each slide "goes around" around its container - the slider - and returns to the original one. This way we can endlessly rotate any number of slides. But there is one nuance that is most important in this scheme - time. You need to time the animation storyboard correctly and set the correct delay for each slide so that not everyone rushes to animate at the same time. In order to understand how to correctly set the delay and calculate the animation time, I followed the path described below.

Let's take the step designations from the previous paragraph and figure out what happens in each step. Basically, steps # 1, 2 and 6 are the steps in which the slide enters the visible area. From the fact that the slides should move inseparably and, as it were, push each other out of the slider, we can conclude that the duration of steps 2 and 6 should be equal. I'll make a reservation right away that I managed to successfully work with this design only under the condition that the duration of the first step is also equal to the duration of the 2nd and 6th. What happens during steps 3, 4 and 5 are essentially technical needs, and for the sake of simplicity, let's combine these three steps into 1.

After simplification, we have:

1. Step - the slider is shown on the original
2. Step - the slider moves to the right
3. Step - the slider makes technical movements
4. Step - the slider moves to the left, returning to its original position

To ensure a seamless slide show, the moment the slide proceeds to step 2, the next slide should proceed to step 4.

If the time per circle of the entire animation is t;
Number of slides - n;
Duration of 3 steps - y;
Duration of steps 1, 2 and 4 - x;
The animation delay step for n-slide is z;
That:

Y = (100 * n - 150) / n;
x = (100 - y) / 3;
x and y must be converted to percentages, and then:
z = 2 * x * t;

For the case when n = 4, as in the example above, we get:

3rd step - 62.5%, 1st, 2nd and 4th - 12.5% ​​each. The animation delay step for each subsequent slide is 25%.

What intervals will be between stages within the third step does not matter.

6) Now that we have calculated everything and know all the values, we can give the final code.

Animation:

@keyframes slide (from (top: 0; left: 0;) 12.5% ​​(transform: translate (0px, 0px);) 25% (transform: translate (-500px, 0);) 36% (transform: translate (- 500px, 300px);) 37% (transform: translate (500px, 300px);) 87.5% (transform: translate (500px, 0);) to (transform: (0px, 0px);))
Slides:

Slide1 (background: url (1.jpg); animation-delay: 7.5s;) .slide2 (background: url (2.jpg); animation-delay: 5s;) .slide3 (background: url (3.jpg); animation-delay: 2.5s;) .slide4 (background: url (4.jpg); animation-delay: 0s;)
Common CSS for all slides:

Slide (width: 500px; height: 300px; position: absolute; top: 0; left: 0; animation-name: slid; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; )
That's all, actually! Thanks to everyone who read to the end.