Easy Carousel
A lightweight, responsive, and feature-rich JavaScript carousel/slider library with no dependencies.
Features
- 🚀 Lightweight and dependency-free
- 📱 Fully responsive
- 🖱️ Mouse drag support
- 📲 Touch swipe support
- ⌨️ Keyboard navigation
- 🔄 Infinite loop option
- ⏯️ Autoplay with pause on hover
- 🖼️ Lazy loading support
- ✨ CSS3 animations
- 🎯 Center mode
- 📐 Dynamic slide width
- 🎨 Customizable navigation and dots
- 🖥️ Responsive breakpoints
Installation
Via NPM
npm install easy-carousel
Via CDN
<link rel="stylesheet" href="path/to/easy-carousel.css">
<script src="path/to/easy-carousel.js"></script>
Basic Usage
<!-- HTML Structure -->
<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>
// Initialize carousel
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 | Margin between items (px) |
| loop | boolean | false | Infinite loop |
| center | boolean | false | Center active item |
| mouseDrag | boolean | true | Enable mouse drag |
| touchDrag | boolean | true | Enable touch drag |
| autoWidth | boolean | false | Variable width items |
| startPosition | number | 0 | Starting position |
| nav | boolean | false | Show navigation buttons |
| dots | boolean | true | Show navigation dots |
| autoplay | boolean | false | Enable autoplay |
| autoplayTimeout | number | 5000 | Autoplay interval (ms) |
| autoplayHoverPause | boolean | false | Pause on hover |
| lazyLoad | boolean | false | Enable lazy loading |
| animateIn | string | false | Animation class for entering items |
| animateOut | string | false | Animation class for leaving items |
| responsive | object | {} | Responsive breakpoints config |
Responsive Configuration
const carousel = new EasyCarousel('.my-carousel', {
items: 4,
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1024: {
items: 4
}
}
});
Methods
| Method | Description |
|--------|-------------|
| next() | Go to next slide |
| prev() | Go to previous slide |
| goTo(index) | Go to specific slide |
| destroy() | Destroy carousel instance |
Events
The carousel automatically handles:
- Window resize events
- Mouse drag events
- Touch events
- Keyboard navigation (arrow keys)
- Autoplay events
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- IE11 and above
License
This project is licensed under the MIT License - see the LICENSE file for details.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Development
To modify or enhance the carousel:
- Clone the repository
- Make your changes in the
src directory
- Test your changes using the demo page
- Submit a pull request
Examples
Check out the demo directory for various implementation examples.
