https://github.com/madzadev/image-slider

📷 Image slider component for your pictures
https://github.com/madzadev/image-slider

image nextjs react slider

Last synced: 2 months ago
JSON representation

📷 Image slider component for your pictures

• Host: GitHub
• URL: https://github.com/madzadev/image-slider
• Owner: madzadev
• Created: 2021-03-18T17:31:16.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-14T18:47:01.000Z (11 months ago)
• Last Synced: 2024-09-20T14:37:50.728Z (4 months ago)
• Topics: image, nextjs, react, slider
• Language: JavaScript
• Homepage: https://image-slider-madza.vercel.app
• Size: 10.9 MB
• Stars: 46
• Watchers: 1
• Forks: 14
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React/NextJS Image slider

![Slider Preview](https://images.ctfassets.net/zlsyc9paq6sa/6wX3r2sDGHSPjMEmIk8nSi/5f9e6581fe9b7bf9cf721ffb14aad6b2/image_slider_preview.gif)

### Demo: [https://image-slider-madza.vercel.app](https://image-slider-madza.vercel.app)

---

## Requirements

Node.js 18.x / 20+ is required.

Tested on React 18.2.0 and NextJS 14.1.0.

## Installation

```javascript

 npm install @madzadev/image-slider

```

## Usage

```javascript

import Slider from "@madzadev/image-slider";

import "@madzadev/image-slider/dist/index.css";

```

```javascript

const images = [

  { url: "https://picsum.photos/seed/a/1600/900" },

  { url: "https://picsum.photos/seed/b/1920/1080" },

  { url: "https://picsum.photos/seed/c/1366/768" },

];

```

```javascript

```

`imageList` is the mandatory prop and requires to pass in

an array consisting of objects with `url` keys.

`width` and `height` are mandatory props that

set the dimension of the images shown.

## Behavior

The default values of available options props are displayed.

```javascript

```

## Controls

The default values of available props are displayed.

```javascript

```

## Styling

If set, background color is displayed to fill the background if images are smaller than the slider wrapper.

```javascript

```

## Final notes

The project is under MIT license, so be free to check it out and give

contributions.