Creating an image slider using only CSS3 without page scrolling

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:

  1. There is no page scrolling while clicking the navigation buttons.
  2. Now the default image also has full animation when you first time switch between images using navigation buttons.
  3. 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 div element has its own neighbor - img element.

All div elements have two CSS properties:

  1. 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.
  2. 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 img element 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:

#slides div {
  display: none;
  position: fixed;
}

#slides div:target + img {
  left: 0;
  z-index: 5;
  opacity: 1;
}

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.

#slides img.default {
  left: 0;
  z-index: 5;
  opacity: 1;
}

#slides div:target ~ img.default {
  z-index: 1;
  opacity: 0;
  left: -500px;
}

Here is the full HTML and CSS code for the new slider.

HTML code:

1 2 3 4 5

CSS code:

#image-slider {
  margin: 100px auto;
  width: 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;
}

#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;
}

Continue reading here: Optimizing Windows

Was this article helpful?

0 0