<div class="carousel-container">
<div class="carousel_items">
<div class="carousel_item item1">
<p class="carousel_text">Image 1</p>
</div>
<div class="carousel_item item2">
<p class="carousel_text">Image 2</p>
</div>
<div class="carousel_item item3">
<p class="carousel_text">Image 3</p>
</div>
<div class="carousel_item item4">
<p class="carousel_text">Image 4</p>
</div>
<div class="carousel_item item5">
<p class="carousel_text">Image 5</p>
</div>
</div>
</div>
*{
margin:0;
padding:0;
}
.carousel {
&_items {
display: flex;
wrap: nowrap;
overflow: hidden;
}
&_item {
position: relative;
min-width: 100%;
height: 100vh;
transition: all 0.5s linear;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
&_text {
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-50%);
padding:0.5rem 1rem;
border-radius:3px;
background-color:rgb(0,0,0,0.8);
color: white;
text-shadow: 1px 1px black;
font-size:calc(1.5rem + 0.3vw);
font-weight:bolder;
}
}
.item {
&1 {
background-image: url("https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
}
&2 {
background-image: url("https://images.unsplash.com/photo-1501862700950-18382cd41497?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=519&q=80");
}
&3 {
background-image: url("https://images.unsplash.com/photo-1536697246787-1f7ae568d89a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzR8fHNwYWNlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
}
&4 {
background-image: url("https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8QUl8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
}
&5 {
background-image: url("https://images.unsplash.com/photo-1673901736622-c3f06b08511f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80");
}
}
View Compiled
const carouselItems = document.querySelectorAll(".carousel_item");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
// It will be used to shift the items by incrementing its
// value every 2 seconds and multiplying it by 100
let i = 1;
// Running the condition every 2 seconds using setInterval
setInterval(() => {
// Accessing All the carousel Items
Array.from(carouselItems).forEach((item, index) => {
// Checking if the value of i is less than the
// number of carousel items, if it is true,
// move all the carousel items 100% towards left
if (i < carouselItems.length) {
item.style.transform = `translateX(-${i * 100}%)`;
}
});
// If the the value of i is less than the number of
// Carousel items, then increment the value of i by 1
// Otherwise set the value of i to 0 if it becomes greater
// than the number of carousel items
if (i < carouselItems.length) {
i++;
} else {
i = 0;
}
}, 2000);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.