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;
}
Thanks.. I tried it, and it works perfectly.. 🙂
Hi Shane!
Thanks for your feedback. Keep visiting us for more free jQuery plugins and front-end scripts.
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.
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:
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
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
How to make carousel button move 1 slide instead of 3 on click ?