Responsive Multiple Items CSS Only Carousel Slider

Category: Slideshow | May 27, 2019
Author: vincentnavetat
Official Page: Go to Website
Last Update:August 1, 2023
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;
}

9 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!

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

  2. Hi! Amazing work and worked like a charm. But i was wandering how to remove the last “section”. For example i want to have only 6 items/images and remove the third scroll which in my case now its just empty.

    • Hi Filip!
      You also need to remove the following line of code if you placed 6 items/images. It causes third scroll:

      <label class='carousel__control carousel__control--forward' for='carousel-slide-activator-3'>
         πŸ‘‰
      </label>
      
  3. Hi, thanks for this carousel. Great job.

    How display (for exemple) 5 items instead 3 items ?

    I know add H, I, J etc.. items, but in diffΓ©rent view only :/

    Thanks

  4. Hey there!
    Amazing work. Pure life saver. Thank you! Quick question.
    Arrow on the Nav disappears on mobile. Would you happen to know of a quick fix or documentation can you point me in the direct of?
    Thank you

Comments are closed.