\n\n\n```\n\n### Step 2: CSS Styling\n\nNext, apply CSS to style the carousel. You'll focus on positioning, transitions, and visibility of the images:\n\n```css\n.carousel {\n position: relative;\n width: 600px;\n overflow: hidden;\n margin: auto;\n}\n\n.carousel-inner {\n display: flex;\n transition: transform 0.5s ease;\n}\n\n.carousel-item {\n min-width: 100%;\n max-width: 100%;\n display: block;\n}\n\n.carousel-control {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background-color: rgba(0, 0, 0, 0.5);\n color: white;\n border: none;\n padding: 10px;\n cursor: pointer;\n}\n\n.prev {\n left: 10px;\n}\n\n.next {\n right: 10px;\n}\n\nbutton:focus {\n outline: none;\n}\n```\n\n### Step 3: JavaScript Logic\n\nFinally, implement the JavaScript logic for navigating through the carousel:\n\n```javascript\ndocument.addEventListener('DOMContentLoaded', function() {\n const carousel = document.querySelector('.carousel-inner');\n const items = document.querySelectorAll('.carousel-item');\n const totalItems = items.length;\n let currentIndex = 0;\n\n document.querySelector('.next').addEventListener('click', function() {\n currentIndex = (currentIndex + 1) % totalItems;\n updateCarousel();\n });\n\n document.querySelector('.prev').addEventListener('click', function() {\n currentIndex = (currentIndex - 1 + totalItems) % totalItems;\n updateCarousel();\n });\n\n function updateCarousel() {\n const offset = -currentIndex * 100;\n carousel.style.transform = `translateX(${offset}%)`;\n }\n\n // Optionally, you can add auto-rotate functionality\n // setInterval(function() {\n // currentIndex = (currentIndex + 1) % totalItems;\n // updateCarousel();\n // }, 3000);\n});\n```\n\n### Explanation\n\n- **HTML:** Structure consists of a container (`.carousel`) with a `.carousel-inner` that holds each image (`.carousel-item`). Navigation buttons are outside the images for prev/next functionality.\n\n- **CSS:** Uses `flex` for the linear layout of items inside `.carousel-inner`. The images have a `min-width` of `100%` to ensure consistency in display, and transitions are smoothly animated.\n\n- **JavaScript:** Attaches event listeners to buttons to change the `currentIndex`, updating the `transform` CSS property of the `.carousel-inner` to show the relevant picture. The modulus operator `%` allows for continuous looping through images.\n\nThis setup provides a basic but fully functioning image carousel. You can extend this with additional features like auto-slide or paginated navigation as needed."}}}

How do I create a carousel using vanilla JavaScript?

AmazonTechnicalDifficulty: 2

Share on

How do I create a carousel using vanilla JavaScript?

Question Explain

Answer Example

Related Interview Questions