Responsive Multiple Items CSS Only Carousel Slider

Category: Slideshow | May 27, 2019
Responsive Multiple Items CSS Only Carousel Slider
Author: vincentnavetat
Official Page: Go to Website
Last Update:May 27, 2019
License:MIT

Do you need CSS only Carousel (slider) to show multiple items with the arrow? Here we have created a responsive slideshow which work well with most of the browsers.

Every website has some kind of carousel slider and to build such slideshow we take help of Javascript. You have seen many sliders plugins and library like bxslider or slick.

Such plugins need dependence like Jquery to make them run successfully. But how about this Carousel which builds with pure CSS only.

How to Create Multiple Items CSS Only Carousel Slider

To create the multiple items or image slider you need to load the style.css file into your webpage.

<link rel="stylesheet" href="css/style.css">

Next, you need to create the HTML structure for carousel slider as follows and add your own content inside the demo-content div element.

<div class='demo-container'>
      <div class='carousel'>
        <input checked='checked' class='carousel__activator' id='carousel-slide-activator-1' name='carousel' type='radio'>
        <input class='carousel__activator' id='carousel-slide-activator-2' name='carousel' type='radio'>
        <input class='carousel__activator' id='carousel-slide-activator-3' name='carousel' type='radio'>
        <div class='carousel__controls'>
          <label class='carousel__control carousel__control--forward' for='carousel-slide-activator-2'>
            👉
          </label>
        </div>
        <div class='carousel__controls'>
          <label class='carousel__control carousel__control--backward' for='carousel-slide-activator-1'>
            👈
          </label>
          <label class='carousel__control carousel__control--forward' for='carousel-slide-activator-3'>
            👉
          </label>
        </div>
        <div class='carousel__controls'>
          <label class='carousel__control carousel__control--backward' for='carousel-slide-activator-2'>
            👈
          </label>
        </div>
        <div class='carousel__screen'>
          <div class='carousel__track'>
            <div class='carousel__item carousel__item--mobile-in-1 carousel__item--tablet-in-2 carousel__item--desktop-in-3'>
              <div class='demo-content'>
                a
              </div>
            </div>
            <div class='carousel__item carousel__item--mobile-in-1 carousel__item--tablet-in-2 carousel__item--desktop-in-3'>
              <div class='demo-content'>
                b
              </div>
            </div>
            <div class='carousel__item carousel__item--mobile-in-1 carousel__item--tablet-in-2 carousel__item--desktop-in-3'>
              <div class='demo-content'>
                c
              </div>
            </div>
            <div class='carousel__item carousel__item--mobile-in-1 carousel__item--tablet-in-2 carousel__item--desktop-in-3'>
              <div class='demo-content'>
                d
              </div>
            </div>
            <div class='carousel__item carousel__item--mobile-in-1 carousel__item--tablet-in-2 carousel__item--desktop-in-3'>
              <div class='demo-content'>
                e
              </div>
            </div>
            <div class='carousel__item carousel__item--mobile-in-1 carousel__item--tablet-in-2 carousel__item--desktop-in-3'>
              <div class='demo-content'>
                f
              </div>
            </div>
            <div class='carousel__item carousel__item--mobile-in-1 carousel__item--tablet-in-2 carousel__item--desktop-in-3'>
              <div class='demo-content'>
                g
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

You can easily customize all item boxes styles by editing the following CSS.

.demo-content {
  color: #fff;
  display: flex;
  font-family: Helvetica;
  font-weight: 100;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  border-radius: 3px;
  font-size: 56px;
  height: 250px;
  width: 100%;
}

Each item box has a different background color and we did this with the help of CSS child property.

.carousel__item:nth-child(1) .demo-content {
  background-color: #216485;
}
.carousel__item:nth-child(2) .demo-content {
  background-color: #3692b6;
}
.carousel__item:nth-child(3) .demo-content {
  background-color: #6fccc9;
}
.carousel__item:nth-child(4) .demo-content {
  background-color: #a6e3cf;
}
.carousel__item:nth-child(5) .demo-content {
  background-color: #aff0be;
}
.carousel__item:nth-child(6) .demo-content {
  background-color: #527059;
}
.carousel__item:nth-child(7) .demo-content {
  background-color: #243127;
}

You May Also Like

4 thoughts on “Responsive Multiple Items CSS Only Carousel Slider”

  1. Hi
    Thanks for this carousel, which is just what I need! It’s working well, but I’m trying to add more scrolls and I’m a bit unclear on the html for the carousel-slide-activator-3 etc
    Your version has 3 ‘slides’ – you have carousel-slide-activator-2 for the right only link, then 1 and 3, then 2, so I’m a bit confused as to how to add slides 4 and 5, and which numbers to add there – do I also need to add carousel-slide-activator-4 and 5 and then do something like:

    👈

    👉

    Just confused about the order of numbers! Thanks for any help!

    Reply
    • Hi Jeff Anderson!
      Place your images in the same way in HTML and use the nth-type-of selector in CSS for the next images. For example the CSS for the next image:

      .carousel__activator:nth-of-type(10):checked
      ~ .carousel__screen
      .carousel__track {
        -webkit-transform: translateX(-900%);
                transform: translateX(-900%);
      }
      

      You just need to update the value of nth-type-of and translateX value.

      Reply

Leave a Comment

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