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

1 2 3 4 5

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?

+3 0

Readers' Questions

  • Nuguse
    How to make image slider in html using css?
    1 year ago
    1. Create an HTML file and a CSS file.
    2. Add a div element with an ID or class attribute (e.g. “slider”) to the HTML file.
    3. Insert the images you’d like to use as your slider into the HTML file.
    4. Create a CSS rule for the div element with the ID or class attribute you created (e.g. “#slider”).
    5. Insert the following CSS rules to set the width and height of the slider:
    6. #slider { width: 100%; height: 500px; }
    7. Create a CSS rule with the class selector “.slide”. You’ll add this class to each of the images in the slider.
    8. .slide { position: absolute; width: 100%; height: 500px; opacity:
    9. 0; transition: opacity 1s;
    10. }
    11. Insert the following rule to the “.slide” class to make sure that only one image is visible at a time.
    12. .slide:target { opacity:
    13. 1; }
    14. Add the “.slide” class to each of the images in the slider.
    15. Create a new CSS class called “.next” which will be used to create the “next” button.
    16. .next { position: absolute; bottom: 10px; right: 10px; }
    17. Create a new <a> element with the class “.next” and link it to the “#slider” ID.
    18. <a class="next" href="#slider">Next</a>
    19. Add the
    • essi
      How create a slider with contain image?
      1 year ago
    • To create a slider with image content, you can use HTML, CSS, and JavaScript. Here is a step-by-step guide: Step 1: Set up your HTML structure ```html <div class="slider-container"> <div class="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> </div> ``` Step 2: Style the slider using CSS ```css .slider-container { width: 100%; height: 400px; overflow: hidden; position: relative; } .slider { display: flex; transition: transform 0.4s; } .slider img { width: 100%; height: 100%; object-fit: cover; } ``` Step 3: Add JavaScript functionality ```javascript function slide() { const slider = document.querySelector('.slider'); const images = document.querySelectorAll('.slider img'); const imageWidth = images[0].clientWidth; let counter = 1; setInterval(() => { slider.style.transition = 'transform 0.4s ease-in-out'; slider.style.transform = `translateX(${-imageWidth * counter}px)`; counter++; if (counter >= images.length) { counter = 0; setTimeout(() => { slider.style.transition = 'none'; slider.style.transform = 'translateX(0)'; }, 1000); } }, 2000); } slide(); ``` Make sure to replace 'image1.jpg', 'image2.jpg', and 'image3.jpg' with the actual paths to your images. Also, you may need to adjust the CSS styles based on your requirements. This code creates a slider that transitions between the images by translating the 'slider' div horizontally with the help of CSS3's 'transform' property. The 'setInterval' function is used to automate the sliding after a specific interval, and JavaScript logic ensures that the slider loops back to the first image after reaching the last one.