Image Slider

docs generated using Junie AI

A customizable image slider web component for displaying and navigating through images.

Overview

Image Slider is a lightweight, customizable web component that allows you to create image sliders/carousels on your web pages. It provides navigation controls, keyboard support, and smooth transitions between images.

Key Features

• Custom Web Component: Easy to integrate into any web project
• Navigation Controls: Previous/next buttons for image navigation
• Keyboard Navigation: Support for arrow keys to navigate between images
• Smooth Transitions: Configurable fade animations between slides
• Responsive Design: Adapts to container size
• Internationalization: Support for multiple languages via the Translator package

Installation

npm install @mlbrgn/image-slider

Usage

Basic Setup

Import the component in your JavaScript file:

import '@mlbrgn/image-slider';

Add the component to your HTML:

<image-slider></image-slider>

Setting Images

You can set images programmatically:

const slider = document.querySelector('image-slider');
const images = [
  { src: 'path/to/image1.jpg', alt: 'Image 1' },
  { src: 'path/to/image2.jpg', alt: 'Image 2' },
  { src: 'path/to/image3.jpg', alt: 'Image 3' }
];

slider.setImages(images);

Configuration

You can configure the slider using attributes:

<image-slider fade-duration="500"></image-slider>

Or programmatically:

const slider = document.querySelector('image-slider');
slider.setConfiguration({
  fadeDuration: 500
});

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | fadeDuration | Number | 350 | Duration of fade transition in milliseconds (0 for no fade) |

Events

The slider emits events that you can listen for:

const slider = document.querySelector('image-slider');
slider.addEventListener('slide-change', (event) => {
  console.log('Changed to slide:', event.detail.imageId);
});

Development

This package is developed inside the mlbrgn-node-workspace monorepo. Do not run npm run dev or npm install inside this repository.

Clone the monorepo instead: https://github.com/evertjanmlbrgn/mlbrgn-node-workspace