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).

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.

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.

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.

Facebook comments

Discussion (total 4 comments)

AlessVill

August 02, 2013 at 12:16 pm

IT IS SO USEFULL SCRIPT 'COS ABOUT ITS SIMPLICITY IT CAN BE USED ON WAP OR MOBILE DEVICES ONES. BUT I THINK IF ON 'width' PROPERTE MESUREMENT UNITS ISTED OF pixel IT IS USED: proportion porcent [%] FOR SAMPLE: <img width=100% /> IN THIS CASE AN IMAGE (it is obvíous in hi-rex at least 96dpi) COULD BE SHOW ON PC SCREEN AS GOOD MAGNIFY FROM SIDE TO SIDE AND THEN BEEN CAPABLE TO SHOW SO GOOD THE CONTENT OF IMAGE EVEN ON NOT SMARTPHONES WHEN YOU TRUN VIEW SCREEN ON MOBILE FROM: vertical TO horizontal OR VICEVERSA. AS END MAY BE IT COULD BE USEFULL USE A GENERAL <center>...SLIDER SCRIPT...</center> TO IMPRUVE VIEWING ON DIFFERENT BROWSER GETTING A EASY AND BETTER EXPERIENCE ON NET NAVIGATION TO USER.

Signed: Aless.
THANKS ABOUT READ

sarah

September 23, 2013 at 09:15 am

How do I avoid the page jumping with the id scroll? I used the same code as above but lower on the page.
ex: http://www.respasalon.com/blog-test.php

Administrator User

September 23, 2013 at 02:17 pm

I thought a lot about it and I got some ideas on how I can re-develop it, but this time without scrolling. I am going to write another article with new slider. I will write to you when it's done.

Administrator User

September 24, 2013 at 05:42 am

Here is improved version of the slider without page scrolling: http://basicuse.net/articles/pl/textile/html_css/creating_an_image_slider_using_only_css3_without_page_scrolling.