Pure CSS carousel - issue with sliding animation on changing slides - css

Question

I've created pure CSS based Carousal. I'm using javascript just for auto changing the slides, other than that everything is CSS. I'm trying to get the sliding animation effect on changing each slide through CSS "transition" property, but it's not sliding throughout the slide-container.
HTML:
<div class="carousel">
<div class="carousel-inner" id="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item">
<h1>This is my first slide</h1>
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<h1>This is my second slide</h1>
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<h1>This is my third slide</h1>
</div>
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
<label for="carousel-3" class="carousel-control next control-2">›</label>
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
<label for="carousel-1" class="carousel-control next control-3">›</label>
<ol class="carousel-indicators">
<li>
<label for="carousel-1" class="carousel-bullet">●</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">●</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">●</label>
</li>
</ol>
</div>
</div>
Javascript:
var n = 0;
window.ev = false;
document.getElementById("carousel-inner").onmouseenter = function () {
window.ev = true;
};
document.getElementById("carousel-inner").onmouseleave = function () {
window.ev = false;
setTimeout(autoSlide, 400);
};
function autoSlide() {
if (window.ev == false) {
n++;
if (n === 4)
n = 1;
document.getElementById("carousel-" + n).checked = true;
setTimeout(autoSlide, 4000);
}
}
autoSlide();
CSS:
.carousel {
position: relative;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.64);
width: 100%;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
display: block;
min-height: 330px;
width: calc(100% - 100px);
margin: 0 auto;
}
.carousel-control {
border-radius: 50%;
color: #aaa;
cursor: pointer;
display: none;
font-size: 80px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
color: #000;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators li {
display: inline-block;
}
.carousel-bullet {
color: #757575;
cursor: pointer;
display: block;
font-size: 24px;
font-weight: 300;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
color: #009eb1;
}
.carousel-item {
background: lightblue;
padding: 20px;
text-align: center;
}
Here's the js fiddle working example: https://jsfiddle.net/jt68zz9L/4/
Let us know if anyone of you have CSS solution for sliding animation. Appreciate your help.

Answer 1

Cool idea BTW, Always good to make heavy / continuous animations in CSS for GPU leverage.
Small problem in the CSS :-)
You have used the transform property only on the controls, which is redundant.
You needed to:
1) Add transitions to all, not just opacity for the items.
2) Give the checked items a translate of 0, and the unchecked items a 100% translate x axis (you could make that negative to switch the direction.)
Here's the jsfiddle I forked from you: JsFiddle
And here is the updated code plus snippet:
var n = 0;
window.ev = false;
document.getElementById("carousel-inner").onmouseenter = function () {
window.ev = true;
};
document.getElementById("carousel-inner").onmouseleave = function () {
window.ev = false;
setTimeout(autoSlide, 400);
};
function autoSlide() {
if (window.ev == false) {
n++;
if (n === 4)
n = 1;
document.getElementById("carousel-" + n).checked = true;
setTimeout(autoSlide, 4000);
}
}
autoSlide();
.carousel {
position: relative;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.64);
width: 100%;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
display: block;
min-height: 330px;
width: calc(100% - 100px);
margin: 0 auto;
-webkit-transform: translate(100%, 0px);
cursor: pointer;
-ms-transform: translate(100%, 0px);
transform: translate(100%, 0px);
}
.carousel-open:checked + .carousel-item {
-webkit-transform: translate(0px, 0px);
cursor: pointer;
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.carousel-control {
border-radius: 50%;
color: #aaa;
cursor: pointer;
display: none;
font-size: 80px;
line-height: 35px;
position: absolute;
top: 50%;
/* -webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);*/
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
color: #000;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators li {
display: inline-block;
}
.carousel-bullet {
color: #757575;
cursor: pointer;
display: block;
font-size: 24px;
font-weight: 300;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
color: #009eb1;
}
.carousel-item {
background: lightblue;
padding: 20px;
text-align: center;
}
<div class="carousel">
<div class="carousel-inner" id="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item">
<h1>This is my first slide</h1>
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<h1>This is my second slide</h1>
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<h1>This is my third slide</h1>
</div>
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
<label for="carousel-3" class="carousel-control next control-2">›</label>
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
<label for="carousel-1" class="carousel-control next control-3">›</label>
<ol class="carousel-indicators">
<li>
<label for="carousel-1" class="carousel-bullet">●</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">●</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">●</label>
</li>
</ol>
</div>
</div>