Easy Carousel

A lightweight, responsive, and feature-rich JavaScript carousel library with zero dependencies.

Get Started View on GitHub

Installation

Via NPM

npm install easy-carousel

Via CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nikba/easy-carousel/dist/easy-carousel.min.css">
<script src="https://cdn.jsdelivr.net/npm/@nikba/easy-carousel/dist/easy-carousel.min.js"></script>

Basic Usage

<div class="my-carousel">
    <img src="slide1.jpg" alt="Slide 1">
    <img src="slide2.jpg" alt="Slide 2">
    <img src="slide3.jpg" alt="Slide 3">
</div>

<script>
    const carousel = new EasyCarousel('.my-carousel', {
        items: 3,
        margin: 20,
        loop: true,
        nav: true,
        dots: true
    });
</script>

Configuration Options

Option Type Default Description
items number 3 Number of items to show
margin number 0 Space between items (px)
loop boolean false Infinite loop mode
nav boolean false Show navigation arrows
dots boolean true Show navigation dots
autoplay boolean false Enable autoplay
autoplayTimeout number 5000 Autoplay interval (ms)
mouseDrag boolean true Enable mouse drag
touchDrag boolean true Enable touch swipe
responsive object {} Responsive breakpoints config

Events

Interaction Events
  • Resize:

    Automatically handles window resize events for responsive layouts

  • Mouse Drag:

    Handles mouse click and drag events for slide navigation

  • Touch Events:

    Manages touch start, move, and end events for mobile devices

Navigation Events
  • Keyboard Navigation:

    Left/Right arrow keys for slide navigation

  • Autoplay Events:

    Handles play, pause, and hover pause functionality

  • Dot Navigation:

    Click events for dot indicators

Buy me a coffee

If you find Easy Carousel helpful, consider supporting its development!

Buy me a coffee