@ozenselin/image-carousel
Version:
A lightweight image carousel with smooth transitions, multi-control navigation, dynamic scaling, and shadow effects
65 lines (47 loc) • 2.04 kB
Markdown
# Image Carousel
This library creates a captivating image carousel that dynamically grows and shrinks with each transition, enhanced by depth-giving shadows and seamless fluid motion. With versatile navigation options – buttons, indicators, and keyboard support – for a fully customizable experience.
## Installation
To install the carousel, run the following command in your terminal:
```bash
npm install @ozenselin/image-carousel
```
## Usage
### HTML Setup
```html
<div id="carousel-container"></div>
<script src="node_modules/@ozenselin/image-carousel/dist/carousel.min.js"></script>
```
### JavaScript Setup
```javascript
import Carousel from "@ozenselin/image-carousel";
const carousel = Carousel({
rootElement: document.getElementById("my-carousel"),
config: {
images: [
{ src: "image01.jpg", alt: "Image 1" },
{ src: "image02.jpg", alt: "Image 2" },
{ src: "image03.jpg", alt: "Image 3" },
{ src: "image04.jpg", alt: "Image 4" },
{ src: "image05.jpg", alt: "Image 5" },
{ src: "image06.jpg", alt: "Image 6" },
{ src: "image07.jpg", alt: "Image 7" },
],
},
});
carousel.initialize();
```
## Features
- **Dynamic Scaling**: Images grow and shrink with smooth transitions.
- **Shadow Effects**: Depth is added with shadows, enhancing the 3D feel.
- **Multi-Control Navigation**: Navigate using buttons, indicators, or keyboard arrows.
- **Responsive Design**: Optimized for both mobile and desktop devices.
- **Zero Dependencies**: No external libraries required for a lightweight solution.
## API
- `carousel.initialize()` - Starts the carousel.
- `carousel.goToNext()` - Navigate to the next slide.
- `carousel.goToPrevious()` - Navigate to the previous slide.
- `carousel.goToIndex(index)` - Jump to a specific slide.
- `carousel.getCurrentIndex()` - Retrieve the current slide index.
- `carousel.destroy()` - Destroys the carousel and cleans up resources.
## License
This project is licensed under MIT license - see the [LICENSE](LICENSE) file for details.