ap-image-carousel v1.0.0

Image Carousel Component

A simple, lightweight image carousel component with navigation arrows, clickable indicators, and automatic sliding. Ideal for websites that need a responsive, easy-to-use image slider.

Installation

Install the carousel package using npm:

npm install your-carousel-package

Usage

To use the carousel component in your project:

1. Import the Carousel Class and initialize it on a container element.
2. Include the CSS provided by the package for styling.

import Carousel from "your-carousel-package";
import "your-carousel-package/css/reset.css";
import "your-carousel-package/css/styles.css";

// Initialize carousel
const container = document.querySelector(".carousel-container");
const carousel = new Carousel(container, 5000); // 5000 ms for auto-slide interval

HTML Structure

Include a container for the carousel with the following HTML structure:

<div class="carousel-container">
	<button class="carousel-button prev" data-carousel-button="prev">⬅</button>
	<div class="carousel-track-container">
		<ul class="carousel-track" data-slides>
			<li class="carousel-slides">
				<img src="path-to-image1.jpg" alt="Slide 1" />
			</li>
			<li class="carousel-slides">
				<img src="path-to-image2.jpg" alt="Slide 2" />
			</li>
			<!-- Add more slides as needed -->
		</ul>
	</div>
	<button class="carousel-button next" data-carousel-button="next">⮕</button>
	<div class="carousel-nav" data-carousel-nav></div>
</div>

CSS

The carousel component requires basic CSS for layout and appearance, which is included with the package. Import the CSS files directly as shown in the usage example.

Options

• interval: Time in milliseconds between automatic slide transitions. Default is 5000 ms (5 seconds).

Methods

• nextSlide(): Advances to the next slide.
• prevSlide(): Moves to the previous slide.
• goToSlide(index): Jumps to a specific slide based on the index.

Additional Features

• Auto-Slide: Carousel automatically moves to the next slide every 5 seconds (or custom interval).
• Pause on Hover: Pauses the auto-slide when the user hovers over the carousel.
• Navigation Indicators: Dynamic indicators are created based on the number of slides and allow direct navigation by clicking on an indicator.

Example Initialization

// Assuming you have set up the HTML structure in your document
const container = document.querySelector(".carousel-container");
const carousel = new Carousel(container, 4000); // Auto-slide every 4 seconds

License

This project is licensed under the MIT License. See the LICENSE file for more details.