slidish
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    Slidish - React component for building full-featured sliders

    Slidish is a ready to use, simple, highly customizable, responsive React component for building sliders of all types of components including images, videos, etc.

    npm NPM npms.io (final) Coveralls GitHub Workflow Status GitHub tag checks state Snyk Vulnerabilities for npm package npm bundle size

    DOCUMENTATION

    PLAYGROUND

    FANCY DEMO

    Features

    • Ready to use (No customization is needed unless you want more control)
    • Fully responsive
    • Fully accessible
    • Highly customizable
    • SSR (Server Side Rendering) ready
    • Lazy loading
    • Mouse and Touch Compatible
    • Keyboard navigation
    • Hardware acceleration
    • Event handlers (through props)
    • On demand Methods for external control (getState, next, previous, goto, play, pause, goFullscreen, exitFullscreen)
    • Supports images, videos and every possible component you can imagine
    • Customizable thumbnails
    • Slideshow support
    • FullScreen support (via browser api or by using css)
    • Contains builtin TypeScript declaration files
    • Tested on all major web browsers including mobile versions (Chrome, Safari, Firefox, Edge, Opera, IE 11)
    • Fully documented with examples for every option (https://hosseini44444.github.io/slidish/)

    Getting started

    1. Install the package by running the following command in your project's root folder:
    npm install --save slidish
    1. Import the default export and styles from the installed package:
    import Slidish from "slidish";
    import "slidish/style.css";
    1. Start using the package in your react components like below:
    import React from "react";
    import Slidish from "slidish";
    import "slidish/style.css";
    
    const MyComponent = (props) => {
      return (
        <div id="slidish-container">
          <Slidish>
            <img src="images/1.jpg" alt="space shuttle failure" />
            <img src="images/2.jpg" alt="space shuttle lunch" />
            <img src="images/3.jpg" alt="space shuttle lunch 2" />
            <img src="images/4.jpg" alt="North America's night from above" />
            <img src="images/5.jpg" alt="astronomical image 1" />
            <img src="images/6.jpg" alt="astronomical image 2" />
            <img src="images/7.jpg" alt="astronomical image 3" />
            <img src="images/8.jpg" alt="astronomical image 4" />
            <img src="images/9.jpg" alt="astronomical image 5" />
          </Slidish>
        </div>
      );
    };
    
    export default MyComponent;
    1. Enjoy the result

    Tip:

    • Every direct child of the Slidish will become a unique slide .

    • Here we've used images as slides.

    • You could insert videos, embedded YouTube videos, divs and any other elements or React components.

    Click here for Slidish's full documentation with examples and more

    Install

    npm i slidish

    DownloadsWeekly Downloads

    9

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    221 kB

    Total Files

    98

    Last publish

    Collaborators

    • hosseini44444