Newborn Programming Monsters

    react-slideshow-image
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.4 • Public • Published

    React-Slideshow

    Workflow codecov Package Quality downloads

    A simple slideshow component built with react that supports slide, fade and zoom effects. For full documentation click here

    Installation

    npm install react-slideshow-image -S
    
    yarn add react-slideshow-image
    

    You need to import the css style, you can do that by adding to the js file

    import 'react-slideshow-image/dist/styles.css'

    or to your css file

    @import "react-slideshow-image/dist/styles.css";

    You can use three different effects of the slideshow. Check examples

    Slide Effect

    You can use this playground to tweak some values

    import React from 'react';
    import { Slide } from 'react-slideshow-image';
    import 'react-slideshow-image/dist/styles.css'
    
    const slideImages = [
      {
        url: 'images/slide_2.jpg',
        caption: 'Slide 1'
      },
      {
        url: 'images/slide_3.jpg',
        caption: 'Slide 2'
      },
      {
        url: 'images/slide_4.jpg',
        caption: 'Slide 3'
      },
    ];
    
    const Slideshow = () => {
        return (
          <div className="slide-container">
            <Slide>
             {slideImages.map((slideImage, index)=> (
                <div className="each-slide" key={index}>
                  <div style={{'backgroundImage': `url(${slideImage.url})`}}>
                    <span>{slideImage.caption}</span>
                  </div>
                </div>
              ))} 
            </Slide>
          </div>
        )
    }

    Fade Effect

    You can use this playground to tweak some values

    import React from 'react';
    import { Fade } from 'react-slideshow-image';
    import 'react-slideshow-image/dist/styles.css'
    
    const fadeImages = [
      {
      url: 'images/slide_5.jpg',
      caption: 'First Slide'
      },
      {
      url: 'images/slide_6.jpg',
      caption: 'Second Slide'
      },
      {
      url: 'images/slide_7.jpg',
      caption: 'Third Slide'
      },
    ];
    
    const Slideshow = () => {
      return (
        <div className="slide-container">
          <Fade>
            {fadeImages.map((fadeImage, index) => (
              <div className="each-fade" key={index}>
                <div className="image-container">
                  <img src={fadeImage.url} />
                </div>
                <h2>{fadeImage.caption}</h2>
              </div>
            ))}
          </Fade>
        </div>
      )
    }

    Zoom Effect

    You can use this playground to tweak some values

    import React from 'react';
    import { Zoom } from 'react-slideshow-image';
    import 'react-slideshow-image/dist/styles.css'
    
    const images = [
      'images/slide_2.jpg',
      'images/slide_3.jpg',
      'images/slide_4.jpg',
      'images/slide_5.jpg',
      'images/slide_6.jpg',
      'images/slide_7.jpg'
    ];
    
    const Slideshow = () => {
        return (
          <div className="slide-container">
            <Zoom scale={0.4}>
              {
                images.map((each, index) => <img key={index} style={{width: "100%"}} src={each} />)
              }
            </Zoom>
          </div>
        )
    }

    Development

    If you want to run the app in development mode, you can run npm start to build the file in watch mode or npm build and then npm pack if you want to use it as a module in another project on your laptop. To run the storybook just run npm run storybook

    Install

    npm i react-slideshow-image

    DownloadsWeekly Downloads

    12,176

    Version

    4.0.4

    License

    MIT

    Unpacked Size

    228 kB

    Total Files

    19

    Last publish

    Collaborators

    • femioladeji