Skip to content

React component for building full-featured sliders

License

Notifications You must be signed in to change notification settings

hosseini44444/slidish

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.