React Slidy 🍃

aminimal 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:

importReactSlidyfrom'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 -->
<linkrel="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 theitemsToPreload 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 thekeyboardNavigation 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.

Using Infinite Loop

You could make your slider infinite. That meand when it arrive to the last slide, and the user clicks on next it starts again. And when the slider is on the first slide, and the user clicks on previous, it goes to the last slide.

Simple example with 5 slides in total

Show multiple slides at once 🤹‍♂️

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

Simple example with 3 slides

Example with less slides than numOfSlides

UsingnumOfSlides with sanitize the number of shown items if there's not enough children available to be used. For example, ifnumOfSlides 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 propsanitize in order to avoid changing thenumOfSlides 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 propuseFullWidth.

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 bymidudev