This is improved
version of the slider which was presented in the previous article.
The new version of the
slider has only a couple of changes, so there is no need to describe the old
slider code, only the changes. Here is the description of the old slider code:creating an image slider using only CSS3.
The current slider has
three advantages in comparison with the old one:
- There is no page scrolling
while clicking the navigation buttons.
- Now the default image also has
full animation when you first time switch between images using navigation
buttons.
- In HTML, one element was
removed to make it simpler ("slide-frame" element).
To prevent page
scrolling, the targeted elements were changed from img to div tags,
where div elements are placed in the same parent element
as img elements (here parent element is tag div with id "slides").
Every divelement has its own neighbor - img element.
All div elements
have two CSS properties:
- display with value none to hide
all div elements. They don't need to be displayed,
because they are only used for targeting by :targed selector.
- position with value fixed to turn off
page scrolling. All elements with such position are positioned relative to
the browser window, that is the reason why page scrolling stops working
and that's what we wanted in the first place.
When div element
is targeted by :target selector, the special CSS styles are
applied to its neighboring imgelement which goes right after the
current div element. That's the whole trick!
Here is a part of CSS
code which is used to get the result:
The following CSS code
displays the default image with class "default"
which has to be shown when none of the images hasn't yet been selected by the
navigation buttons. Meanwhile, this CSS code hides the default image when one
of images is selected by the navigation buttons.
Here is the full HTML
and CSS code for the new slider.
HTML code:
<!doctype html>
<html>
<head>
<meta
charset="utf-8">
<title>Slider in
css </title>
<style
type="text/css">
#image-slider {
margin: 100px auto;
width: 700px;
}
#navigation {
margin: 5px 0 0 0;
text-align: center;
z-index: 10;
}
#navigation a {
text-decoration: none;
background: #003C72;
padding: 2px 6px;
color: #FFFFFF;
display: inline-block;
border-radius:25px;
}
#navigation a:hover {
background: #0182C4;
}
#slides {
height: 375px;
overflow: hidden;
position: relative;
}
#slides img {
position:absolute;
top: 0;
left: -500px;
}
#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 div {
display: none;
position: fixed;
}
#slides div:target +
img {
left: 0;
z-index: 5;
opacity: 1;
}
#slides img.default {
left: 0;
z-index: 5;
opacity: 1;
}
#slides div:target ~
img.default {
z-index: 1;
opacity: 0;
left: -500px;
}
.image .text {
position:absolute;
top:10px;
left:10px;
width:300px;
}
</style>
</head>
<body>
<div
id="image-slider">
<div id="slides">
<div
id="slide1"></div>
<img src="nature1.jpg"
alt="" />
<div
id="slide2"></div>
<img src="nature2.jpg"
alt="" />
<div
id="slide3"></div>
<img src="nature3.jpg"
alt="" />
<div
id="slide4"></div>
<img src="nature4.jpg"
alt="" />
<div
id="slide5"></div>
<img src="nature5.jpg"
alt="" />
<img class="default"
src="nature1.jpg" alt="" />
</div>
<div id="navigation">
<a
href="#slide1">1</a>
<a
href="#slide2">2</a>
<a
href="#slide3">3</a>
<a
href="#slide4">4</a>
<a
href="#slide5">5</a>
</div>
</div>
</body>
</html>
