React Sliderify

React Sliderify is a versatile and user-friendly slider package for React that makes it easy to create responsive sliders from any content. With a range of customizable options and intuitive configuration, you can turn anything into a slider in just a few simple steps. The package utilizes the latest React technology to ensure a smooth and seamless experience, making it the ideal solution for developers and designers looking to add dynamic, eye-catching sliders to their projects. Whether you're creating a product carousel, image gallery, or a simple content slider, React Sliderify provides the tools and functionality you need to get the job done quickly and efficiently.

Demo

React Sliderify Demo.

Features

• Responsive
• Mobile friendly
• Keyboard navigation
• Auto play with custom interval
• Infinite loop
• Custom slide directions
• Supports images, videos, text content or anything you want. Each direct child represents one slide!
• Supports external controls
• Highly customizable:
  • Custom arrows
  • Custom indicators colors
  • Custom status

Important

The presentation has been configured to mimic an endless loop by replicating the slides. Upon reaching the final slide, it seamlessly transitions back to the first slide without any disruption or jump to the beginning just like the owl carousel. You don't even know 😎.

Installing as a package

Using yarn: yarn add react-sliderify

Using npm: npm install react-sliderify

Usage

import React from "react";
import { Sliderify } from "react-sliderify";

const Page = () => {
  return (
    <div className="home-page">
      <Sliderify>
        <div
          style={{ height: "500px", backgroundColor: "red", color: "white" }}
        >
          Slide 1
        </div>
        <div
          style={{ height: "500px", backgroundColor: "green", color: "white" }}
        >
          Slide 2
        </div>
        <div
          style={{ height: "500px", backgroundColor: "blue", color: "white" }}
        >
          Slide 3
        </div>
      </Sliderify>
    </div>
  );
};

// Note: you have the option to enhance the presentation by supplying an array of objects to the 'slides' property. Each object must contain a 'content' property, representing the slide content in the form of a JSX element. The 'title' property is optional and can be used to provide a descriptive heading for the slide.

Props

| Name | Value | Description | | ------------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | slides | an array of objects | An array of objects. Each object must contain a 'content' property, representing the slide content in the form of a JSX element. The 'title' property is optional and can be used to provide a descriptive heading for the slide. | | autoPlay | boolean | Change the slide automatically based on slideDurationInSecs prop. | | slideDurationInSecs | number | Measured in seconds, determines the frequency at which the slides advance automatically when the autoPlay option is enabled. The default interval is set to 10 seconds. | | slideDirection | left or right | Direction of the slide. Defaults to left | | showNavButtons | boolean | Hide or show the arrow navigation buttons. Defaults to true. | | navPrevIcon | any | A custom element designated as the 'previous icon' which, upon click, navigates to the preceding slide. | | navNextIcon | any | A custom element designated as the 'next icon' which, upon click, navigates to the next slide. | | showNavDots | boolean | Hide or show the active slide indicators. Defaults to true | | showSpot | boolean | Hide or show the circular spot which has been included as a stylistic feature by setting the relevant option. Defaults to true. | | showTitle | boolean | When slides are supplied through the slides property, this option is to show or hide the accompanying title, if present. | | color | string | Set the color of some elements like the circular spot if visible. | | baseColor | string | Set the base color of the indicators | | activeColor | string | Set the active color of the indicators. When a slide is active, the indicator lights up. | | disableInfiniteLoop | boolean | This controls the activation or deactivation of the infinite loop feature. Defaults to false. | | disableTransition | boolean | This controls the activation or deactivation of the transition animation. Defaults to false. | | rounded | boolean | Add or remove rounded corners (border-radius). | | transitionDurationInMS | number | Adjust the duration of the transition between slides. Defaults to 1000 ms (1 second). | | spotPlacement | top-left or top-right or bottom-left or bottom-right | Set the postion of the circular spot slides wrapper. Defaults to top-left. | | dotsPlacement | outside or inside | Set the position of the dot indicators, inside or outside the slides. Defaults to outside. | | keyboardNavigationOnFocus | boolean | Control the slides with arrow keys on the keyboard when in focus. Defaults to true. | | className | string | Additional class names for styling | | clip | boolean | Add or remove clip-path CSS style. Defaults to false. | | clipRight | boolean | Clip the top right of the slides wrapper. Just for additional styling. Defaults to false. | | showSlideStatus | boolean | Display or conceal the status of the current active slide in relation to the total number of slides. Defaults to false. |

Navigation arrows

By default, the navigation arrows are displayed. Should you require any adjustments or customization, you can utilize the navPrevIcon and navNextIcon properties to modify the appearance of the arrows. These can be replaced with text or a custom-styled element that includes animation. To demonstrate, here is an example that utilizes the react-icons library to incorporate a new set of arrows.

import React from "react";
import {
  BsArrowLeftSquare as LeftArrow,
  BsArrowRightSquare as RightArrow,
} from "react-icons/bs";

import { Sliderify } from "react-sliderify";

<Sliderify navPrevIcon={<LeftArrow />} navNextIcon={<RightArrow />}>
  <div>Slider 1</div>
  <div>Slider 2</div>
  <div>Slider 3</div>
</Sliderify>;

/// `navPrevIcon` and `navNextIcon` can be set to anything even strings. You can animate them as you see fit.

Upcoming features

• Drag and swipe
• Custom animation
• Vertical axis
• More customization

If you have any ideas or suggestions for improving the package, please don't hesitate to reach out at [email protected]. Your feedback is valued and appreciated.