Creating an autoplay carousel using HTML, CSS, and JavaScript is a great way to showcase multiple images or content in a visually appealing way. In this article, we’ll walk through the steps to create such a carousel. We’ll also provide a live example and instructions on how to run the application.
In this article, we will create an autoplay carousel that displays colorful content slides. The carousel will automatically transition between slides at regular intervals.
Prerequisites:
Approach
- HTML: Make a “carousel” container with “carousel-item” elements for content.
- CSS: Style container dimensions, background, and item appearance.
- JavaScript: Manage “active” class, set an interval for auto-rotation (e.g., every 3.5 seconds), and switch items. You can also customize content and adjust the interval for desired behavior. Test and refine as needed.
Example: This example describes the basic implementation of the the autoplay carousel using HTML, CSS, and JavaScript.
HTML
<!DOCTYPE html> <html> <head> <title>Autoplay Carousel</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="carousel"> <div class="carousel-item"> <div class="slide-image" style="background-image: url('https://media.geeksforgeeks.org/img-practice/banner/mern-full-stack-development-classroom-thumbnail.png?v=19625');"> </div> </div> <div class="carousel-item"> <div class="slide-image" style="background-image: url('https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19625');"> </div> </div> <div class="carousel-item"> <div class="slide-image" style="background-image: url('https://media.geeksforgeeks.org/img-practice/banner/neveropen-classes-live-thumbnail.png?v=19625');"> </div> </div> <div class="carousel-item"> <div class="slide-image" style="background-image: url('https://media.geeksforgeeks.org/img-practice/banner/gate-crash-course-2024-thumbnail.png?v=19625');"> </div> </div> </div> <script src="./script.js"></script> </body> </html> |
CSS
* { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; } .carousel { position: relative; width: 270px; height: 160px; overflow: hidden; background-color: #cdcdcd; } .carousel-item .slide-image { width: 270px; height: 160px; background-size: cover; background-repeat: no-repeat; } .carousel-item { position: absolute; width: 100%; height: 270px; border: none; top: 0; left: 100%; } .carousel-item.active { left: 0; transition: all 0.3s ease-out; } .carousel-item div { height: 100%; } .red { background-color: red; } .green { background-color: green; } .yellow { background-color: yellow; } .violet { background-color: violet; } |
Javascript
window.onload = function () { let slides = document.getElementsByClassName('carousel-item'); function addActive(slide) { slide.classList.add('active'); } function removeActive(slide) { slide.classList.remove('active'); } addActive(slides[0]); setInterval(function () { for (let i = 0; i < slides.length; i++) { if (i + 1 == slides.length) { addActive(slides[0]); setTimeout(removeActive, 350, slides[i]); break; } if (slides[i].classList.contains('active')) { setTimeout(removeActive, 350, slides[i]); addActive(slides[i + 1]); break; } } }, 1500); }; |
Output:
Output
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
