# react-slideshow-lib

> React slideshow component

Latest version **0.0.11** (published 2023-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-slideshow-lib
pnpm add react-slideshow-lib
yarn add react-slideshow-lib
bun add react-slideshow-lib
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2023-05-26 |
| First published | 2023-05-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 26.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | markliu2013 |
| Maintainers | markliu2013 |
| Keywords | react, Slideshow |

## Links

- npm: https://www.npmjs.com/package/react-slideshow-lib
- Repository: https://github.com/markliu2013/react-slideshow
- Homepage: https://markliu2013.github.io/react-slideshow
- Issues: https://github.com/markliu2013/react-slideshow/issues
- npm.io page: https://npm.io/package/react-slideshow-lib

## Dependencies (1)

- [@storybook/preset-scss](https://npm.io/package/@storybook/preset-scss.md) ^1.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.11 (latest) — 2023-05-26
- 0.0.10 — 2023-05-24
- 0.0.9 — 2023-05-24

## README

# React-Slideshow

React slideshow component supporting slide, fade.

## Installation
```
# npm
npm install react-slideshow-lib

# yarn
yarn add react-slideshow-lib
```

### Options
1. fx - The name of the slideshow transition to use. The following transition names are available by default and more can be added with plugins: fade and scrollHorz.
2. duration - The time between slide transitions in milliseconds.
3. transitionDuration - how long the transition takes.
4. delay - The number of milliseconds to add onto, or substract from, the time before the first slide transition occurs.
5. defaultIndex - Specifies the first slide to display
6. loop - Specifies if the transition should loop infinitely
7. pauseOnHover - whether the transition effect pause when the mouse hovers the slider
8. easing - The timing transition function to use. You can use one of linear, ease.


Here's a basic example
```tsx
import React from 'react';
import SlideShow from 'react-slideshow-lib';

const Example = () => {

    return (
        <SlideShow>
            <img src="url1" />
            <img src="url2" />
            <img src="url3" />
            <img src="url4" />
        </SlideShow>
    );
};

export default Example;
```
[codesandbox](https://codesandbox.io/s/slideshow-default-bsecfv)

Navigation example

```tsx
import React, { useEffect, useRef } from "react";
import SlideShow from "react-slideshow-lib";

const images = [
    "https://images.unsplash.com/photo-1684529419842-6b0284bc83cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60",
    "https://images.unsplash.com/photo-1684698937050-ae323feb1fb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60",
    "https://images.unsplash.com/photo-1682018667453-b8d127e055b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60",
    "https://images.unsplash.com/photo-1681999683665-6902894af42c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60"
];

export default function App() {
    const slideRef = useRef();

    useEffect(() => {
        slideRef.current.pause();
    }, [slideRef]);

    return (
        <>
            <SlideShow ref={slideRef}>
                {images.map((i) => (
                    <img src={i} />
                ))}
            </SlideShow>
            <div style={{ textAlign: "center" }}>
                <a href="javascript:void(0)" onClick={() => slideRef.current.goNext()}>
                    next
                </a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="javascript:void(0)" onClick={() => slideRef.current.goBack()}>
                    prev
                </a>
            </div>
        </>
    );
}
```
[codesandbox](https://codesandbox.io/s/slideshow-navigation-rs1cfo)


Page example

```tsx
const Example = () => {

    const slideRef = useRef();

    useEffect(() => {
        slideRef.current.pause();
    }, [slideRef]);

    return (
        <>
            <SlideShow {...args} ref={slideRef}>
                {images.map(i => <img src={i} />)}
            </SlideShow>
            <div style={{textAlign: "center"}}>
                {images.map((_, i) => (<><a href="javascript:void(0)" onClick={() => slideRef.current.goTo(i)}>{i+1}</a>&nbsp;&nbsp;&nbsp;</>))}
            </div>
        </>
    )
    
};

export default Example;

```
[codesandbox](https://codesandbox.io/s/slideshow-pages-yvjdib)

---
_Source: https://npm.io/package/react-slideshow-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._