<div class="carousel-wrapper">
<div class="carousel-container">
<div class="carousel">
<div class="image-one"></div>
<div class="image-two"></div>
<div class="image-three"></div>
</div>
</div>
</div>
$size-width: 400px;
$size-height: 250px;
.carousel-wrapper {
width: $size-width * 1.3;
height: $size-height * 1.4;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
border-radius: 20px;
margin: 100px auto 20px;
}
.carousel-container {
width: $size-width;
height: $size-height;
overflow: hidden;
margin: 0 auto;
}
.carousel {
display: flex;
width: $size-width * 3;
animation: sliding 12s infinite;
div {
width: $size-width;
height: $size-height;
background-size: cover;
background-position: center;
}
&:hover {
animation-play-state: paused;
}
.image-one {
background-image: url("https://images.unsplash.com/photo-1480936600919-bffa6b7ecf1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}
.image-two {
background-image: url("https://images.unsplash.com/photo-1475053081036-c8eb31d187b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}
.image-three {
background-image: url("https://images.unsplash.com/photo-1525278070609-779c7adb7b71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}
}
@keyframes sliding {
30% {
transform: translateX(0);
}
35% {
transform: translateX(-$size-width);
}
65% {
transform: translateX(-$size-width);
}
70% {
transform: translateX(-$size-width * 2);
}
98% {
transform: translateX(-$size-width * 2);
}
100% {
transform: translateX(0);
}
}
@media screen and (max-width: 768px) {
$size-width: 240px;
$size-height: 150px;
.carousel-wrapper {
width: $size-width * 1.3;
height: $size-height * 1.4;
}
.carousel-container {
width: $size-width;
height: $size-height;
}
.carousel {
width: $size-width * 3;
> div {
width: $size-width;
height: $size-height;
}
}
@keyframes sliding {
30% {
transform: translateX(0);
}
35% {
transform: translateX(-$size-width);
}
65% {
transform: translateX(-$size-width);
}
70% {
transform: translateX(-$size-width * 2);
}
98% {
transform: translateX(-$size-width * 2);
}
100% {
transform: translateX(0);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.