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.

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 ๐Ÿคนโ€โ™‚๏ธ

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 ๐Ÿ“–

children* requiredunion

Children to be used as slides for the slider

classNameBasestringdefault value: 'react-Slidy'

Class base to create all clases for elements. Styles might break if you modify it.

doAfterDestroyfuncdefault value: function noop() {}

Function that will be executed AFTER destroying the slider. Useful for clean up stuff

doAfterInitfuncdefault value: function noop() {}

Function that will be executed AFTER initializing the slider

doAfterSlidefuncdefault value: function noop() {}

Function that will be executed AFTER slide transition has ended

doBeforeSlidefuncdefault value: function noop() {}

Function that will be executed BEFORE slide is happening

easestringdefault value: 'ease'

Ease mode to use on translations

imageObjectFitenum

Determine the object-fit property for the images ("cover" or "contain")

infiniteLoopbooldefault value: true

Determine if the slider will be infinite, that means, when it arrives to the last slide and the user click on next, it will go to the first one. And if the current slide is the first, and the user clicks on previous, it will go to the last one.

itemsToPreloadnumberdefault value: 1

Determine the number of items that will be preloaded

initialSlidenumberdefault value: 0

Determine the first slide to start with

keyboardNavigationbool

Activate navigation by keyboard

lazyLoadSliderbooldefault value: true

Determine if the slider will be lazy loaded using Intersection Observer

lazyLoadConfigshapedefault value: { offset: 150 }

Configuration for lazy loading. Only needed if lazyLoadSlider is true

navigateByKeyboardbooldefault value: false

Activate navigation by keyboard

numOfSlidesnumberdefault value: 1

Number of slides to show at once

sanitizebooldefault value: true

Determine if we want to sanitize the slides or take numberOfSlider directly

slidenumberdefault value: 0

Change dynamically the slide number, perfect to use with dots

showArrowsbooldefault value: true

Determine if arrows should be shown

slideSpeednumberdefault value: 500

Determine the speed of the sliding animation

useFullHeightbooldefault value: false

Use the full height of the container adding some styles to the elements

Created and mantained by midudev