npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-sliderify

v1.1.3

Published

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

Downloads

47

Readme

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.