CSS Image Sliders

Contribute and help us stay up-to-date. Edit this page on GitHub.

This article demonstrates how to create several CSS image sliders for your webpage. Included are code walkthroughs and other slider examples.

A CSS image slider is a crucial part of any website or app. Sliders allow you to compact graphical information in a fun interactive way. The majority of the time, sliders are helpful to websites because they can be used to showcase different products or other relevant content to the visitor.

What Is an Image Slider in CSS?
Creating an Image Slider With Bullet Points
Creating an Automatic Image Slider
Creating an Image Slider With Links
Creating an Image Slider with Nav Buttons
Other Examples
See Also

An image slider is an animated HTML fragment used to display images, text, and videos as a slide show. The slider is typically made of frames that can be viewed independently. It is like a small viewport or screen that contains all the slides. Sometimes slides are on an automatic timer that changes to the next slide after some time. Other times there are controls that allow a user to adjust the content manually.

Let’s start by creating a basic image slider using only CSS. This slider will have bullet points to toggle between the three images.

First, we want to create the HTML outline. This outline includes <span>, <img>, and <a> elements.

<div class="slider">
  <span id="slide-1"></span>
  <span id="slide-2"></span>
  <span id="slide-3"></span>
  <div class="image-container">
    <img src="https://images.unsplash.com/photo-1440342359743-84fcb8c21f21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="slide" width="500" height="300" />
    <img src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1141&q=80" class="slide" width="500" height="300" />
    <img src="https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80" class="slide" width="500" height="300" />
  </div>
  <div class="buttons">
    <a href="#slide-1"></a>
    <a href="#slide-2"></a>
    <a href="#slide-3"></a>
  </div>
</div>

The second step is applying styles to the <a> navigation links and setting the animation transition for each slide as it moves into view.

.slider {
  width: 500px;
  height: 300px;
  background-color: yellow;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  text-align: center;
  overflow: hidden;
  border-radius: 10px;
}

.image-container {
  width: 1500px;
  background-color: pink;
  height: 300px;
  clear: both;
  position: relative;
  -webkit-transition: left 2s;
  -moz-transition: left 2s;
  -o-transition: left 2s;
  transition: left 2s;
}

.slide {
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
}

#slide-1:target ~ .image-container {
  left: 0px;
}

#slide-2:target ~ .image-container {
  left: -500px;
}

#slide-3:target ~ .image-container {
  left: -1000px;
}

.buttons {
  position: relative;
  top: -3rem;
}

.buttons a {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background-color: white;
  box-shadow: 0px 0px 6px #00000087, inset 0px 0px 1px black;
  margin: 10px;
}

Sometimes we want to create an image slider that doesn’t have controls. We can achieve this by using CSS @keyframe animations to create a timer that controls each slide. The keyframes will use the background-position property to move a single image from left to right.

To begin, we’ll create a single HTML div element.

<div class="simple"></div>

The next step is to add the CSS styles and the @keyframe animations to animate the single-frame slider.

.simple {
  width: 800px;
  height: 350px;
  background-color: #eeeeee;
  margin: auto;
  background: url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2400&q=80");
  animation-name: slide;
  animation-duration: 10s;
  animation-direction: normal;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

@keyframes slide {
  0% {
    background-position: 0 0;
  }
  16.66% {
    background-position: 0 0;
  }
  33.32% {
    background-position: -800px 0;
  }
  49.98% {
    background-position: -800px 0;
  }
  66.64% {
    background-position: -1600px 0;
  }
  83.30% {
    background-position: -1600px 0;
  }
  100% {
    background-position: 0 0;
  }
}

Sometimes it is necessary to create a slider with links to jump to individual slides. The links can be made with <a> elements (anchor links) to jump to the correct slide. The link elements are then styled up to create buttons with numbers.

The slides are boxes and use CSS flexbox to create a row and overflow to control how many boxes are visible.

For the transition effect between slides, use the CSS scroll-snap-type and then scroll-behavior with its value set to smooth. The smooth value results in a smooth animation that jumps to the next slide whenever clicking any of the links.

Additionally, we can style up a scroll bar as an optional control and add the overscroll-behavior property to make it swipeable.

Now let’s create the links and slides semantically.

<div class="slider">
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
  <a href="#slide-3">3</a>
  <a href="#slide-4">4</a>
  <a href="#slide-5">5</a>
  <div class="slides">
    <div id="slide-1">1</div>
    <div id="slide-2">2</div>
    <div id="slide-3">3</div>
    <div id="slide-4">4</div>
    <div id="slide-5">5</div>
  </div>
</div>

Next, we will need the buttons, positioning, slides, and scrollbar styles.

.slider {
  width: 500px;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.slides::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
}

.slides::-webkit-scrollbar-track {
  background: transparent;
}

.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 500px;
  height: 300px;
  margin-right: 50px;
  border-radius: 10px;
  background: #eee;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
}

.slider > a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
}

.slider > a:active {
  color: #1c87c9;
}

.slider > a {
  color: black;
}

.slider > a:focus {
  background: #eee;
}

body {
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #1c87c9, #ffcc00);
  font-family: "Ropa Sans", sans-serif;
}

CSS Image Slider With Autoplay and Navigation Buttons

In this following code walkthrough, we can spice an image slider up with autoplay and navigation buttons. A cool thing about this example is the autoplay animation stops once a user interacts with the slider. When creating this example, we’ll rely on the scroll-snap-align property and the ::after and ::before pseudo-elements. We’ll also use two SVGs embedded in the background-image: url(svg) for the navigation arrows.

Let’s create the elements.

<section class="carousel" aria-label="Gallery">
  <ol class="carousel__viewport">
    <li id="carousel__slide1" tabindex="0" class="carousel__slide">
      <div class="carousel__snapper">
        <a href="#carousel__slide4" class="carousel__prev"></a>
        <a href="#carousel__slide2" class="carousel__next"></a>
      </div>
    </li>
    <li id="carousel__slide2" tabindex="0" class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide1" class="carousel__prev"></a>
      <a href="#carousel__slide3" class="carousel__next"></a>
    </li>
    <li id="carousel__slide3" tabindex="0" class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide2" class="carousel__prev"></a>
      <a href="#carousel__slide4" class="carousel__next"></a>
    </li>
    <li id="carousel__slide4" tabindex="0" class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide3" class="carousel__prev"></a>
      <a href="#carousel__slide1" class="carousel__next"></a>
    </li>
  </ol>
  <aside class="carousel__navigation">
    <ol class="carousel__navigation-list">
      <li class="carousel__navigation-item">
        <a href="#carousel__slide1" class="carousel__navigation-button"></a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide2" class="carousel__navigation-button"></a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide3" class="carousel__navigation-button"></a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide4" class="carousel__navigation-button"></a>
      </li>
    </ol>
  </aside>
</section>

We must add the element’s styles to get the autoplay animation and navigation arrows working.

@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

body {
  max-width: 37.5rem;
  margin: 1rem auto;
  padding: 0 1.25rem;
  font-family: "Lato", sans-serif;
}

* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 0px;
}

*::-webkit-scrollbar {
  width: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

* {
  -ms-overflow-style: none;
}

ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  padding-top: 56.25%;
  filter: drop-shadow(0 0 10px #0003);
  perspective: 100px;
}

.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  background-color: #f99;
  counter-increment: item;
}

#carousel__slide1 {
  background-color: #3dc0e6;
}

#carousel__slide2 {
  background-color: #f89427;
}

#carousel__slide3 {
  background-color: #ec7272;
}

#carousel__slide4 {
  background-color: #5ab196;
}

.carousel__slide:before {
  content: counter(item);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -40%, 70px);
  color: #fff;
  font-size: 2em;
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

@media (hover: hover) {
  .carousel__snapper {
    animation-name: tonext, snap;
    animation-timing-function: ease;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

  .carousel__slide:last-child .carousel__snapper {
    animation-name: tostart, snap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__snapper {
    animation-name: none;
  }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
  animation-name: none;
}

.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}

.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 27%;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
}

.carousel::before,
.carousel__prev {
  left: -1rem;
}

.carousel::after,
.carousel__next {
  right: -1rem;
}

.carousel::before,
.carousel::after {
  content: "";
  z-index: 1;
  background-color: #333;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  font-size: 2.5rem;
  line-height: 4rem;
  text-align: center;
  pointer-events: none;
}

.carousel::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}

.carousel::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}

Here is a collection of sliders from around the web you can use in your project. The CSS sliders provided will be written in CSS and HTML, with sometimes JavaScript mixed in. Using these examples is relatively easy as long as you have some experience in HTML, CSS, and JavaScript. Included are links with examples and code for use on your website.

About Project

HTML CSS Driven Responsive Image Slider

HTML CSS Driven Responsive Image Slider is a project on codepen.io which uses CSS keyframes to generate a sliding animation. This example uses HTML figure and figcaption elements to markup the image element. Also, when the screen is resized, the slider resizes to fit the screen horizontally.

Author

Dudley Storey
codepen.io

About Project

Responsive Image Slider

Responsive Image Slider is a project on codepen.io which uses CSS and JQuery to animate a solid rectangle slider. You can add your images to fill in the colored backgrounds of each slide. The project uses CSS transitions on the next and previous button’s opacity for a fade-in, fade-out hover effect.

Author

David Fitas
codepen.io

About Project

Pure CSS Featured Image Slider

Pure CSS Featured Image Slider is a project on codepen.io which uses pure CSS to create an image slider. The image slider has a picture frame border representing a real-world art frame. Addionally, the CSS slider contains round black buttons at the frame’s bottom to navigate the slides. This example only uses 24 lines of HTML.

Author

Joshua Hibbert
codepen.io

About Project

GSAP Slider

GSAP Slider is a project on codepen.io which uses CSS, GSAP JavaScript library, and JQuery to create an exceptional CSS slider. The slider includes navigation buttons and snippet of text with a read more link. The slider works on multiple screen sizes. This example also uses CSS flex to layout the content within each slide and to place each slide in a row.

Author

Goran Vrban
codepen.io

About Project

Slicebox 3D Image Slider

Slicebox 3D Image Slider is a project on codepen.io which uses CSS, JQuery Slicebox library, and Jquery to create a 3D rotating image slider. This image slider scales to fit the screen as the screen size changes. Also, this project includes buttons to navigate the image slides left or right. Included in the CSS styles is a special transition. The transition is preserve-3d which makes the child element keep it’s 3D position.

Author

codefactory
codepen.io

About Project

CSS Only Image Slider

CSS Only Image Slider is a project on codepen.io which contains two image slides. A slide is loaded in via an animation when a user clicks on one of the buttons. The animation slices two images down the middle and blurs the slide to the next one. This animation is created without the CSS keyframes at-rule.

Author

Damián Muti
codepen.io

About Project

Canvas Image Slider

Canvas Image Slider is an image slider on codepen.io which uses CSS and the GSAP Tweenmax JavaScript library to create a multilayered lens. The slider moves the layers in lens focus as the animation traverses to the next slide. Next, the slider blurs the layers and loads the next image from the opposite direction. Addionally, the lens slider is responsive to different screen sizes.

Author

Dario Fuzinato
codepen.io

About Project

Image Slider With Masking Effect

Image Slider With Masking Effect is a project on codepen.io in which an image slider is designed as a card. The card uses a CSS drop shadow to create a raised effect, as if the slider is floating above the document. You can navigate the different slides when clicking the arrows inside the card. When the slider loads in new text, the text fades into view. This project uses a cool CSS transition style called cubic-bezier which is a type of easement when transitioning the slides.

Author

Bhakti Pasaribu
codepen.io

About Project

Flexbox Image Slider

Flexbox Image Slider is a project on codepen.io in which an image slider is created using CSS flexbox. The slider includes navigation buttons outside of the slider frame. When hovering over the navigation buttons, the buttons scale up, which causes the buttons to enlarge as the cursor hovers over the button. The scale animation is made using the CSS transform translateX.

Author

Katherine Kato
codepen.io

About Project

Fullscreen Image Slider

Fullscreen Image Slider is a project on codepen.io where the author has created a fullscreen image slider. When the slider is resized using the screen or viewed on a different device, the slider resizes the fill the entire screen. The project uses pure JavaScript the give the buttons the ability to control the slider direction. Event listeners are attached to each navigation button and trigger the JavaScript custom slide function.

Author

Brad Traversy
codepen.io

About Project

Modular Responsive Image Slider

Modular Responsive Image Slider is a project on codepen.io that expands to the full page. The image slider is responsive and resizes to fit different screen sizes. This project is modular, which means you can stack the sliders like blocks to build different row lengths or even a grid. When clicking on the navigation dots, the dots pulse with an animation effect to reflect the click. Also, when hovering over the slider, the navigation arrows slide and fade into the viewport to become clickable.

Author

Eric Porter
codepen.io

About Project

Auto Generated Responsive CSS Slider

Auto Generated Responsive CSS Slider is a project on codepen.io which utilizes only images for each slide of the slider. The slider is responsive and resizes to fit different screen sizes. This example uses CSS translate3d and CSS keyframe at-rules to control the slide animations.

Author

Dudley Storey
codepen.io

About Project

Image Slider CSS Only

Image Slider CSS Only is a project on codepen.io, which is built with only HTML and CSS. You can add images to this slider by extending the HTML code and CSS classes that reference a new slide. The user can change the content on the slider by using the white navigation circles in the middle bottom portion of the CSS slider.

Author

Sandra Vos
codepen.io

About Project

Pure CSS3 Responsive Slider

Pure CSS3 Responsive Slider is a project on codepen.io, which is created in pure CSS. This slider includes left and right navigational arrows and navigation dots in the middle bottom portion of the slider. To animate the slider, it uses a CSS keyframe at-rule to fade in the image when the user changes the slide. The fade in effect is made by using the CSS opacity property and mixing in an ease-in-out CSS transition.

Author

Mayur Birle
codepen.io

About Project

Image Slider With Mobile Swipe

Image Slider With Mobile Swipe is a project on codepen.io which uses HTML, CSS, and JavaScript. The image slider includes an automatic sliding animation which is triggered every 4 seconds by a JavaScript variable (“let interval = 4000”). The slides can be switched by swiping the screen when using this image slider with a mobile device. This functionality is created by using the touchend JavaScript event listener.