In this tutorial, we will make a great CSS3 slider. It will use the fade effect between slides. Additionally, you can use a description for each image. An unordered list will be used to organize the information. Slides will switch automatically using CSS3 animations.

HTML markup

The HTML markup is very simple. The example has four slides. Each one consists of an image (as background) and description text in a div element. Inserting additional slides is very easy.

css

The slider uses CSS3 animations anim_slides and anim_titles . The first is applied to individual slides, the second - to the description text. The position and transparency also change for the description.

/* Slider */ .slides ( height:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; ) .slides ul ( list-style:none; position:relative; ) /* Animation Frames # anim_slides */ @-webkit-keyframes anim_slides ( 0% ( opacity:0; ) 6% ( opacity:1; ) 24% ( opacity:1; ) 30% ( opacity:0; ) 100% ( opacity:0; ) ) @-moz-keyframes anim_slides ( 0% ( opacity:0; ) 6% ( opacity:1; ) 24% ( opacity:1; ) 30% ( opacity:0; ) 100% ( opacity:0; ) ) . slides ul li ( opacity:0; position:absolute; top:0; /* css3 animation */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode : forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; ) /* css3 delays */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0 s; ) .slides ul li:nth-child(3), .slides ul li:nth-child(3) div ( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; ) . slides ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; ) .slides ul li img ( display:block; ) /* #anim_titles animation frames */ @-webkit-keyframes anim_titles ( 0% ( left:100%; opacity:0; ) 5% ( left:10%; opacity:1; ) 20% ( left:10%; opacity:1; ) 25% ( left:100%; opacity:0; ) 100% ( left:100%; opacity:0; ) ) @-moz-keyframes anim_titles ( 0% ( left:100 %; opacity:0; ) 5% ( left:10%; opacity:1; ) 20% ( left:10%; opacity:1; ) 25% ( left:100%; opacity:0; ) 100% ( left :100%; opacity:0; ) ) .slides ul li div ( background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFFFFF; font-size:26px; left:10%; margin:0 auto; padding:20px; position:absolute; top:50%; width:200px; /* Animation css3 */ -webkit-animation-name: anim_titles; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_titles; -moz-animation-duration: 24. 0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; )

November 4, 2019 The entry has been updated

Yuri Nemets

Sliders on pure CSS+ bonus slider

CSS sliders have some advantages over Javascript sliders. One such benefit is download 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 see only pure CSS sliders.

Here's what I found on a website about sliders:

1. CSS3 image slider

A CSS slider that uses radio buttons to navigate the 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 to display now, the :checked pseudo-classes are used.

2. CSS3 image slider with thumbnails

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

3. CSS Gallery

But this CSS slider is perfect for selling 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 can immediately see all the benefits that this page has for him. Above all, this slider is responsive, which is also nice.

4. CSS slider without links

Just want to note 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. The change of slides takes place in a beautiful mode: first, two slides are moved apart and the slide becomes in the center, which will then become the main one. The slide is then enlarged and placed in front of the others.

5. CSS3 Responsive Slider

Another adaptive slider based on radio buttons. 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 look on a 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 great for creating an image gallery. Words cannot explain what he does, so it's better to watch everything on the video:

Conclusion

With the help of 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 selling page in order to immediately show the visitor the main benefits that he will receive. You can still find a lot of ways where and how to use sliders, but one thing is clear for sure - they are useful when used correctly.

Items covered in the article.

Time does not stand still and with it progress. This also affected the Internet. You can already see the change appearance sites, especially popular adaptive design. And as a result, many new responsive jquery sliders, galleries, carousels or similar plugins.
1. Responsive Horizontal Posts Slider

Responsive horizontal carousel with detailed instruction by installation. It is made in a simple style, but you can style it for yourself.

2. Slider on Glide.js

This slider is suitable for any website. This uses Glide.js with open source. Slider colors can be easily changed.

3. Tilted Content Slideshow

Responsive content slider. The highlight of this slider is the 3d effect of images, as well as various random appearance animations.

4. Slider using HTML5 canvas

Very beautiful and impressive slider with interactive particles. Made with HTML5 canvas

5. Image Morphing Slider

Slider with morphing effect (Smooth transformation from one object to another). IN this example the slider is well suited for the portfolio of a web developer or a web studio in the form of a portfolio.

6. Circular Slider

Slider in the form of a circle with the effect of flipping the image.

7. Blurred background slider

Responsive slider with switching and background blur.

8. Responsive fashion slider

Simple, lightweight and responsive website slider.

9. Slicebox - jQuery 3D image slider(UPDATED)

Updated version of Slicebox slider with fixes and new features.

10.Free Animated Responsive Image Grid

A jQuery plugin for creating a flexible image grid that will switch shots using different animations and timings. This can look good as a background or decorative element on the site, as we can set the selective appearance of new images and their transitions. The plugin is made in several versions.

11.Flex slider

Universal free plugin for your website. This plugin comes in multiple slider and carousel options.

12. Photo frame

Fotorama is a universal plugin. It has many settings, everything works quickly and easily, it is possible to view slides in full screen. The slider can be used both in fixed size and adaptive, with and without thumbnails, with and without circular scrolling and much more.

P.S.I put the slider several times and I think that it is one of the best

13. Free and Responsive 3D Thumbnail Gallery Slider.

Experimental slider gallery 3DPanelLayout with grid and interesting animation effects.

14. Slider on css3

Responsive slider made using css3 with smooth appearance of content and light animation.

15. WOW Slider

WOW Slider is an image slider with amazing visual effects.

17.Elastic

Elastic slider with full responsiveness and slide thumbnails.

18. Slit

This is a fullscreen responsive slider using css3 animation. The slider is made in two versions. The animation is done quite unusually and beautifully.

19. Responsive photo gallery plus

Simple free slider-gallery with uploading images.

20. Responsive slider for WordPress

Responsive free slider for WP.

21. Parallax Content Slider

Slider with parallax effect and control of each element with CSS3.

22. Slider with music binding

Slider using open source JPlayer. This slider resembles a presentation with music.

23. Slider with jmpress.js

The responsive slider is based on jmpress.js and will therefore allow some interesting 3D effects to be applied to the slides.

24. Fast Hover Slideshow

slide show with fast switching slides. Slides switch on hover.

25. Image Accordion with CSS3

Image accordion with css3.

26. A Touch Optimized Gallery Plugin

This adaptive gallery which is optimized for touch devices.

27. 3D Gallery

3D Wall Gallery- created for the Safari browser, where the 3D effect will be visible. When viewed on a different browser, the functionality will be fine, but the 3D effect will not be visible.

28. Slider with pagination

Responsive pagination slider with jQuery UI slider. the idea is to use a simple navigation concept. It is possible to rewind all images or switch between slides.

29.Image Montage with jQuery

Automatic arrangement of images depending on the width of the screen. A very useful thing when developing a portfolio website.

30. 3D Gallery

A simple 3D circular slider in css3 and jQuery.

31. Full screen mode with 3D effect on css3 and jQuery

Slider with the ability to view full-screen images with a beautiful transition.

1. jQuery Fresco Plugin

Responsive jquery gallery (resizes when screen resolution changes) displayed in a popup with thumbnails and image captions. jquery fresco gallery works correctly in most browsers including: IE6+, Firefox 3+, Chrome 5+, Opera 9+. The free version of this plugin can only be used on non-commercial projects.

2. "Adaptor" slider

Slider with various transition effects (7 different effects, including 3D). Project on Github.

3. Slider plugin with different effects "jQ-Tiles"

Plugin with various transition effects, with adjustable slide speed, with auto-scroll function.

4. jQuery plugin "Sly"

Plugin to implement vertical and horizontal scroller. Project on Github.

5. Animated CSS3 Makisu Menu

6. Simple slideshow

7. Functional jQuery slider "iView Slider v2.0"

Content slider / slideshow (not only images, but also video clips and more can be used as a slide HTML content). For navigation, you can use: thumbnails, Left / Right buttons and using the keyboard. Project on Github.com.

8. A set of jQuery plugins "Vanity"

There are 7 plugins in the set: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder and jCollapse. A set of these solutions will help you implement sliders, tooltips, tabs, image popups, and more.

9. Hover CSS3 Effect

10. CSS3 Dropdown Menu

11.iOSlider

A slider designed to work on mobile devices.

12. CSS3 loading indicator

13. CSS3 hover effect

14. "Product Colorizer" jQuery Plugin

The plugin is an easy solution for viewing products in different colors (relevant, for example, for online clothing stores, to let visitors choose color scheme product from several options). The plugin requires only two images for each product (all colors will be superimposed as a mask). The plugin works in all major browsers including IE7+ (will work in IE6 too if you fix the display transparency PNG). Project on GitHub.

15. CSS3 Animated Charts

16. Creating an overlay effect when clicking on the image

When you click on the image, it darkens, going to the background, and paragraphs with captions appear. Thus it is possible to give short description elements in the image.

17. Page navigation in the form of a drop-down menu

A solution for implementing convenient document navigation in the form of a drop-down menu. The content is fixed at the top of the screen and always remains in the visitor's field of vision. When you select a section in the menu, smooth scrolling page to the selected part of the document.

18. CSS3 gallery with hover effect

When you hover over the image, a quick change of photos occurs. The gallery is implemented in two versions: with a description of the pictures that appears after the visitor moves the cursor away from the gallery and without a description.

19. jQuery Parallax Slider

20. CSS3 hover animation on blocks

21. CSS3 jQuery popup panel

Click on the arrow at the bottom of the screen on the demo page to see pop-up icons.

22. Free HTML5 image gallery "Juicebox Lite"

A very functional new image gallery for the site. The gallery can be either with or without thumbnails, with or without a description of the image, it can be expanded to full screen or displayed on a page with fixed sizes. On the demo page, you can choose the kind of gallery you like. Available for download free version galleries. For more advanced functionality and for removing the developer logo, you will have to pay.

23. Plugin "JQVMap"

24. CSS3 Parallax Slider

25. jQuery photo gallery with thumbnails

Responsive gallery, image and thumbnail sizes change with the size of the browser window.

26. jQuery content slider plugin "Horinaja"

The plugin is easy to install, customizable, cross-browser. Any HTML content can act as a slide, not just images. You can scroll through the slides using the mouse wheel while the cursor is on the slide area.

27. jQuery Pikachoose slider plugin

In three variations: the implementation of a simple change of images without a description and thumbnails; slider with image captions and thumbnails; slider with thumbnails and added opening a larger image in a popup window with FancyBox effect. The latest version can always be found on Github.

28. Some Custom CSS Styles for Dropdowns

Five different styles of dropdown lists using different CSS technician.

29. Restaurant menu with animated 3D effect

Interesting CSS jQuery presentation of information on the page. By clicking on the link, the booklet menu opens and the visitor can read more about the dishes provided in the pop-up window. Animation does not display correctly in IE.

30. Elastislide plugin

Implementation of a rubber adaptive carousel (vertical and horizontal carousel of images) and an image gallery. When the browser window is reduced, the number of images is reduced to a certain minimum value and then the size of the remaining images is scaled. Project on Github.

31. Fresh CSS3 jQuery Slit Slider

Responsive slider plugin (width can be set as a percentage and it will automatically scale) in two styles with an interesting animated effect when changing slides (the slide is cut in half and moved apart in different sides and a new one takes its place). Keyboard navigation is possible. latest version always on Github.

32. New version of 3D image slider "Slicebox"

A new version with the changes made and the addition of new features: now the 3D slider has become scalable, you can see it when you reduce the browser window; Added support for Firefox; in the slide description, you can already use HTML content (previously, the description was pulled from the link attribute without the ability to use HTML tags). On the demo page, you can see 4 options for using the plugin. latest version lives on Github.com.

The effect is very similar to the 3D CU3ER Flash Gallery (demo , download), only this 3D slider is not made with flash technologies, but with the help of javascript.

33.jQuery Plugin "PFold"

Experimental solution. The plugin implements a 3D effect with imitation of a note unfolding. Various versions: with three spreads, with two spreads and a spread with the subsequent centering of the expanded note.

34.jQuery Plugin "Windy"

A plugin for navigating through content, such as images. When scrolling through the photos, they scatter in different directions (the effect is somewhat reminiscent of the distribution of cards in the poker card game). For navigation, you can use the left / right buttons or the slider (see the demo page for different options). Project on

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 in changing in automatic or manual mode content. Content can be 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:

1. CSS effects work faster. This is clearly visible on mobile devices.
2. 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 overflow property for 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 is known, there is whole line events that allow you to change the properties of an element when CSS help. 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