React Slidy 🍃

a minimal and optimal slider for React ⚛️ in ~1KB +1KB if intersection-observer polyfill if needed

How to install ℹ️

Install the latest version of the package:

npm install react-slidy --save

Import the component:

import ReactSlidy from 'react-slidy'

Import the styles:

@import '~react-slidy/lib/index';

or directly in your javascript file if you're using a bundler:

import 'react-slidy/lib/index.scss'
// or using the css provided
import 'react-slidy/lib/styles.css'

you could also load the CSS directly from HTML:

<!-- from the index.html -->
<link rel='stylesheet' href='https://unpkg.com/react-slidy/lib/styles.css'>

Customization 👩‍🎨

If you're using SASS, you could modify the following variables:

$react-slidy-c-background: transparent !default;
$react-slidy-c-nav-background: rgba(255, 255, 255, .8) !default;
$react-slidy-c-nav-color: #aaaaaa !default;
$react-slidy-c-transparent: rgba(0, 0, 0, 0) !default;
$react-slidy-mh: 50px !default;
$react-slidy-h-image: auto !default;

Examples 📖

Preload all the images 🖼

The slider is optimized in order to be lazy loaded and, then, load the images only when needed so you could notice an empty image while sliding. You could preload as much as images as you want by using the itemsToPreload in order to avoid that effect if you wish.

Using with React components ⚛️

You could use the slider with React components. Just put them inside. Every child will be rendered as slide. For example:

Using Keyboard Navigation ⌨️

You could use the keyboardNavigation prop in order to activate keyboard navigation. Try to use the left and right arrow in order to navigate the next slider.

Using an anchor as wrapper 🔗

While not recommendable, you could wrap the Slider with a clickable element like an anchor, and the next and previous buttons will work as expected while the rest of the slider is clickable.

Using Dynamic Content ⚡

You could easily add more content to the slider and it will adapt automatically for you. Try to click the button in order to add more content and check that how the new slides are being added.

Show multiple slides at once 🤹‍♂️

Use numOfSlides prop to determine the number of slides that will be shown at once.

Simple example with 3 slides

Example with less slides than numOfSlides

Using numOfSlides with sanitize the number of shown items if there's not enough children available to be used. For example, if numOfSlides is 5, but you have only two slides, it will show only two using the full width.

Example with less slides than numOfSlides but with sanitize as false

You could, however, disable the previous behaviour by using the prop sanitize in order to avoid changing the numOfSlides prop on the fly. This mean the space will be divided by the numOfSlides even if there's no slides enough to show.

Creating dots ···

While React Slidy doesn't offer a built-in progress indicator, you could build one easily with a few lines of code thanks to its API.

Avoid slides to use the full width

By default, slides uses the full width of the container. So, if you're using an image, it uses all the width available. You could avoid this by using the prop useFullWidth.

Adapt slides to use the height available

If you have slides with different heights you need to specify the maxHeight to be used for each slide, in order to avoid inner images or content to make the slider jump as they will automatically adapt to the available width and automatically detect the height.

Using custom arrows

API 📖

Created and mantained by midudev