Creating an image slider using only CSS3
Usually image sliders are created in JavaScript, but with release of CSS3 this can be done in CSS3 without JavaScript. An image slider in the current article is quite simple to demonstrate that elaborate things can be achieved keeping the minimum code.
HTML code
The image slider consists of several basic elements: "image-slider", "slide-frame", "slides", "navigation". Each element is a tag div with an attribute id of its own name.
The "image-slider" element is a base of the image slider and incorporates all elements.
The "slide-frame" element consists of default image and "slides" element. Default image and "slides" element are used to show the default image if none of the images is selected in the slider on the other hand they are used to show "slides" element when one of the images has been already selected.
The "slides" element contains images for the slider.
The "navigation" element contains links for navigation between slides (images) where each link is a tag a with an anchor name which points to corresponding image (target element).
CSS code
The following styles are basic and minimal required CSS styles for the image slider without animation and navigation.
#image-slider { margin: 100px auto; width: 500px; } #slide-frame { height: 375px; overflow: hidden; } #slides { height: 375px; overflow: hidden; position: relative; } #slides img { position: absolute; top: 0; left: -500px; } #navigation { margin: 5px 0 0 0; text-align: center; z-index: 10px; } #navigation a { text-decoration: none; background: #003C72; padding: 2px 6px; color: #FFFFFF; display: inline-block; } #navigation a:hover { background: #0182C4; }
In the code above, the width of the "image-slider" element is fixed and equals to the width of one of the images inside the "slides" element.
Also the value of CSS property position is set as relative to the element "slides" and absolute to all its images inside. This makes all the images to be in the same place and overlay each other.
As can be seen for all images inside the element "slides", CSS property left has a negative value which equals to the width of one of the images. It's used to set the initial position of the images, placing them out of the element "slides". It's used for animation when the next slide appears from the left side.
CSS code for animation and navigation
In the following example CSS property transition is used for animation. This is new property which was added in CSS3.
CSS property transition has the following syntax:
transition: transition-property transition-duration transition-timing-function transition-delay;
The image slider shows the next image from left to right, so the value transition-property should be left, but the slider also uses opacity for more complex animation which means the value transition-property must be set to all. The value transition-timing-function is linear. But it also can be: linear, ease, ease-in, ease-out, ease-in-out or cubic-bezier(n,n,n,n). The values transition-duration and transition-delay are 400ms. They can be changed to alter the speed of animation.
#slides img { z-index: 1; opacity: 0; /* animation */ transition: all linear 400ms; -o-transition: all linear 400ms; -moz-transition: all linear 400ms; -webkit-transition: all linear 400ms; } #slides img:target { left: 0; z-index: 5; opacity: 1; }
In the code above the :target selector is used to target the image if we click on the corresponding link in the element "navigation". When the image is targeted, CSS property left is set to 0 to show this image in the element "slides".
Also in this code, CSS property z-index is used. It is needed here to overlay other images by the targeted one.
Continue reading here: What are vendor prefixes in CSS?
Was this article helpful?
Readers' Questions
-
Nuguse1 year ago
- Reply
-
essi1 year ago
- Reply