Infinite Image Carousel Package

This package provides a customizable and interactive image carousel component with automatic slide transitions, manual navigation, and infinite looping functionality.

Features

• Manual navigation: Use left and right buttons to navigate through the slides.
• Automatic sliding: The carousel auto-advances every 5 seconds by default (configurable).
• Infinite loop: The carousel seamlessly loops through slides, with the first slide moving to the last and vice versa.
• Active dots indicator: Dots indicate the active slide and are updated when the slide changes.
• Customizable: You can adjust transition duration and auto-advance duration.

Installation

You can install this package via npm:

npm install infinite-image-carousel

Usage

Import the setImageCarousel function:

import { setImageCarousel } from 'infinite-image-carousel';

Function Signature:

setImageCarousel(slidesWrapper, leftButton, rightButton, dots, activeDotClass = "selected", transitionDuration = "300", autoAdvanceDuration = 5000)

Parameters

The setImageCarousel function requires the following parameters:

• slidesWrapper (Element): The wrapper element containing the slides.
• leftButton (Element): The button for moving to the previous slide.
• rightButton (Element): The button for moving to the next slide.
• dots (NodeList): A collection of dot elements that represent each slide.
• activeDotClass (String, optional): The class name applied to the active dot. Default is "selected".
• transitionDuration (String, optional): The transition duration in milliseconds. Default is 300.
• autoAdvanceDuration (Number, optional): The duration in milliseconds between each automatic slide transition. Default is 5000.

Example Usage

• Source Code
• Live Demo

JavaScript:

import { setImageCarousel } from 'infinite-image-carousel';

const slidesWrapper = document.querySelector('.slides-wrapper');
const leftButton = document.querySelector('.left-button');
const rightButton = document.querySelector('.right-button');
const dots = document.querySelectorAll('.dot');

setImageCarousel(slidesWrapper, leftButton, rightButton, dots, 'active', 600, 3000);

How It Works

1. Infinite Loop: The function automatically moves the first slide to the last and the last slide to the first after each transition.
2. Manual Controls: Clicking the left and right buttons will allow users to navigate manually through the slides.
3. Auto-Sliding: The carousel will automatically advance every 5 seconds (or the time you specify).
4. Dot Navigation: A series of dots will indicate which slide is currently active, and clicking on them will navigate to the corresponding slide.

License

MIT License