Pure CSS Carousel Slider with Dot & Arrow Navigation

Category: Slideshow | May 4, 2019
Pure CSS Carousel Slider
Author: Frontendscript
Official Page: Nil
Last Update:May 24, 2019
License:MIT

You surely have seen many carousel sliders build with JavaScript. But how about creating one with pure CSS only? Maybe you are thinking that the Javascript slider works great on all modern browser, right?

This myth is very old now because, after the invention of CSS3, We can easily replicate most of the features with CSS. So today, I will share a simple carousel which has three different demos.

A demo work with fade in/out animation and another one with the sliding transition. The last one will provide you to scale transform.

All of the carousels comes with an arrow and dot navigation to easily view the next picture by clicking.

Another great thing, It also includes a thumbnail version of a slider which you surely love. Also, all the slideshow allow you to add content over the slider images so this is a nice feature you may looking for.

Let’s start how we can build and customize them.

Creating Pure CSS Carousel Slider

We will start with markup which is well organized. Each slider place instead of a container so you can easily pick anyone which you like.

Before adding HTML markup, Make sure to add style.css file in the document.

To style each slider/carousel differently, We add place an unordered UL element and define a class carousel and my-carousel.

Remember, I am explaining you the first slider from the demo which is fade in/out. All of the others are just similar in coding but the classes are change so don’t worry.

To handle the clicking function, We use the input type radio.

<div class="carousel-container">
  <h2>fade in/out</h2>
  <ul class="carousel my-carousel">
    <input class="carousel__activator" type="radio" id="A" name="activator" checked="checked"/>
    <input class="carousel__activator" type="radio" id="B" name="activator"/>
    <input class="carousel__activator" type="radio" id="C" name="activator"/>
    <input class="carousel__activator" type="radio" id="D" name="activator"/>
    <input class="carousel__activator" type="radio" id="E" name="activator"/>
  </ul>
</div>

Of course, We don’t want to show these radio buttons and use them to handle the next/prev function. So we will hide them through CSS and control them using label element.

Just place the following code just right below the closing </ul>

<div class="carousel__controls">
  <label class="carousel__control carousel__control--backward" for="E"></label>
  <label class="carousel__control carousel__control--forward" for="B"></label>
</div>
<div class="carousel__controls">
  <label class="carousel__control carousel__control--backward" for="A"></label>
  <label class="carousel__control carousel__control--forward" for="C"></label>
</div>
<div class="carousel__controls">
  <label class="carousel__control carousel__control--backward" for="B"></label>
  <label class="carousel__control carousel__control--forward" for="D"></label>
</div>
<div class="carousel__controls">
  <label class="carousel__control carousel__control--backward" for="C"></label>
  <label class="carousel__control carousel__control--forward" for="E"></label>
</div>
<div class="carousel__controls">
  <label class="carousel__control carousel__control--backward" for="D"></label>
  <label class="carousel__control carousel__control--forward" for="A"></label>
</div>

Nice, We are almost done with half of the carousel. It’s time to add images and for this, We simply define li with a class name carousel__slide and add some text like heading (if you want to add) inside it.

Place this code just right below all the label.

If you are not understanding something, Don’t worry, the source file has all this included.

<li class="carousel__slide">
  <h1>A</h1>
</li>
<li class="carousel__slide">
  <h1>B</h1>
</li>
<li class="carousel__slide">
  <h1>C</h1>
</li>
<li class="carousel__slide">
  <h1>D</h1>
</li>
<li class="carousel__slide">
  <h1>E</h1>
</li>

The last and final step to add dot navigation and we will use the same technic which we did for arrow navigation. just simply control the navigation through label element 🙂 That’s It.

<div class="carousel__indicators">
  <label class="carousel__indicator" for="A"></label>
  <label class="carousel__indicator" for="B"></label>
  <label class="carousel__indicator" for="C"></label>
  <label class="carousel__indicator" for="D"></label>
  <label class="carousel__indicator" for="E"></label>
</div>

The Style

The CSS file is little long, not too much but adding all CSS here will not make sense. You can download the source file and find all the demo.

But you surely want to know, How to change the images, right?

When you open a style.css file, You will find the following code. You can simply replace the image path of background-image. That’s it.

.carousel__slide:nth-of-type(1),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) {
  background-image: url("https://unsplash.it/300?random");
  background-size: cover;
  background-position: center;
}
.carousel__slide:nth-of-type(2),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) {
  background-image: url("https://unsplash.it/600?random");
  background-size: cover;
  background-position: center;
}
.carousel__slide:nth-of-type(3),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) {
  background-image: url("https://unsplash.it/900?random");
  background-size: cover;
  background-position: center;
}
.carousel__slide:nth-of-type(4),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(4) {
  background-image: url("https://unsplash.it/1200?random");
  background-size: cover;
  background-position: center;
}
.carousel__slide:nth-of-type(5),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(5) {
  background-image: url("https://unsplash.it/1500?random");
  background-size: cover;
  background-position: center;
}

Did you test this CSS image carousels? How it is? Let me know in below comment section. Thanks.

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.