A lightweight, customizable image carousel component for web applications. Supports automatic slide transitions, navigation controls, and dot indicators.
- Automatic slide transitions with customizable interval.
- Navigation controls to move to the next or previous slide.
- Dot indicators for direct slide selection.
- Pause on hover functionality.
Install the package via npm:
npm install @uttamkn/image_carousel- parentElement: The DOM element where the carousel will be appended.
- slides: An array of image URLs.
- maxWidth (optional): The maximum width of the carousel (default is 600px).
Include a container element in your HTML where the carousel will be rendered:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carousel Example</title>
</head>
<body>
<div id="carousel-container"></div>
<script type="module" src="main.js"></script>
</body>
</html>Import the carousel function and initialize it with your slides:
// main.js
import getCarousel from "@uttamkn/image_carousel";
const slides = ["image1.jpg", "image2.jpg", "image3.jpg"];
document.addEventListener("DOMContentLoaded", () => {
const container = document.getElementById("carousel-container");
getCarousel(container, slides);
});You can customize the maximum width of the carousel by passing an additional argument:
getCarousel(container, slides, 800); // Set max-width to 800px