Simple Animated Carousel

A reusable animated carousel component with:

• Auto-slide
• Prev/Next buttons
• Dots
• Pause on hover or tap
• Configurable delay & resume

Installation

npm install simple-animated-carousel

Usage

Write it in your js file

import Carousel from 'simple-animated-carousel';
import 'simple-animated-carousel/dist/carousel.css';

Carousel.init('#carousel-container', {
  autoSlide: true,
  delay: 4000,
  pauseOnHover: true,
  resumeDelay: 8000
});

HTML Structure

<div id="carousel-container" class="container">
  <div class="image"><img src="..." /></div>
  <div class="image"><img src="..." /></div>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
  <div class="dots">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>