Hello everyone, in this tutorial, I'll show you how to use HTML, CSS, and Javascript to make a basic auto-sliding carousel. I'll outline all the logics and provide the complete code for the Codepen example.
Let's get started...
Overview
HTML -
CODE
<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>
- I've placed the carousel pieces with some text inside the main container, which will be shown at the bottom centre.
CSS - The CSS is compiled from SASS.
CODE
* {
margin: 0;
padding: 0;
}
.carousel_items {
display: flex;
wrap: nowrap;
overflow: hidden;
}
.carousel_item {
position: relative;
min-width: 100%;
height: 100vh;
transition: all 0.5s linear;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.carousel_text {
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-50%);
padding: 0.5rem 1rem;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
text-shadow: 1px 1px black;
font-size: calc(1.5rem + 0.3vw);
font-weight: bolder;
}
.item1 {
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");
}
.item2 {
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");
}
.item3 {
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");
}
.item4 {
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");
}
.item5 {
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");
}
- We created a flexible container, then we set the container's wrap value to nowrap to arrange the carousel items in a single row, with overflow hidden hiding the remaining items in the row. * When the carousel item's min-width is set to 100%, the other items will be hidden and will occupy the entire width. In order to position the carousel text at the bottom center, I adjusted its position to absolute with relative to carousel items.
- Set a different background picture for each carousel item by using the item-* class name for each item independently.
Javascript -
CODE
const carouselItems = document.querySelectorAll(".carousel_item");
let i = 1;
setInterval(() => {
// Accessing All the carousel Items
Array.from(carouselItems).forEach((item,index) => {
if(i < carouselItems.length){
item.style.transform = `translateX(-${i*100}%)`
}
})
if(i < carouselItems.length){
i++;
}
else{
i=0;
}
},2000)
- Using setInterval, the condition is run every two seconds. If the value of i is fewer than the number of carousel items, then all of the carousel items should be moved 100% to the left.
- Increase the value of i by one if it is less than the number of items on the carousel. In the event that it exceeds the number of carousel elements, set the value of i to 0.
THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram -
Email - <--
Also check these posts as well
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR