React-Slideshow

React slideshow component supporting slide, fade.

Installation


npm

npm install react-slideshow-lib
yarn

yarn add react-slideshow-lib


$3

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 ( ); };

export default Example;`codesandbox

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 ( <> {images.map((i) => ( ))}


                 slideRef.current.goNext()}>
                    next
                
                        
                 slideRef.current.goBack()}>
                    prev


        
    );
}


codesandbox

Page example

`tsx const Example = () => {

const slideRef = useRef();

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

return ( <> {images.map(i => )}


                {images.map((_, i) => (<> slideRef.current.goTo(i)}>{i+1}   ))}


        
    )
    
};
export default Example;

``
codesandbox

React-Slideshow

React slideshow component supporting slide, fade.

Installation


npm

npm install react-slideshow-lib
yarn

yarn add react-slideshow-lib


$3

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 ( ); };

export default Example;`codesandbox

Navigation example

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

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

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

return ( <> {images.map((i) => ( ))}


                 slideRef.current.goNext()}>
                    next
                
                        
                 slideRef.current.goBack()}>
                    prev


        
    );
}


codesandbox

Page example

`tsx const Example = () => {

const slideRef = useRef();

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

return ( <> {images.map(i => )}


                {images.map((_, i) => (<> slideRef.current.goTo(i)}>{i+1}   ))}


        
    )
    
};
export default Example;

``
codesandbox