To create a dynamic carousel that shows images or information that rotates across the screen by using a combination of JavaScript, HTML, and CSS to format and style.
HTML
One of the first things to do, is create basic HTML structure in the project file- index.html. In the body element create a
tag and in it add all of the information that will be displayed within the carousel. Each element should have a unique identifier, either id or class. This will be used to grab the information for DOM manipulation and to style it within the style sheet.JavaScript
Switching to the index.js file to work in, this is where the data will be declared and appended to the DOM. If information is from an API, remember to fetch the data and use the forEach() method to iterate through the array. Then declare variables in order to access the information that was fetched, change any text content or image source, and append all information to the DOM. For the carousel to work define a function that will handle the transition between the slides.
// Initialize carousel
const carouselItems = Array.from(carousel.getElementsByClassName('carousel-item'));
let currentIndex = 0;
carouselItems[currentIndex].classList.add('active');
// Function to show the next carousel item
function showNextItem() {
carouselItems[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % carouselItems.length;
carouselItems[currentIndex].classList.add('active');
}
// Set interval to automatically show the next item every 5 seconds
setInterval(showNextItem, 5000);
})
CSS
Styling the carousel is what really brings it together. Here is an example of css being used-
.carousel {
width: 100%;
overflow: hidden;
position: relative;
}
.carousel-item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
.carousel-item.active {
opacity: 1;
}
.info {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px;
font-size: 16px;
}
Top comments (0)