react-slideshow-with-pagination v1.0.2

React Slideshow with Pagination

You can check out the live-slideshow.vercel.app demo (from Live Slideshow repository) that was created to show this library's potentials in action.

The react-slideshow-with-pagination can have pagination (numbers or dots) and arrow buttons for changing screens and dozens of other feature that help to customize the slideshow as much as possible. Also, check out the demo from a mobile device (real or emulated) it's fully responsive.

Installation:

npm install --save react-slideshow-with-pagination

How to use:

Import the SlideshowWithPagination from react-slideshow-with-pagination and just like that you have a fully responsive slideshow with pagination and arrow buttons.

Note that you can use the library with the pagination and arrow buttons feature (only) or you can use it with the pagination and arrow buttons along with the preset card features which have almost anything you expect from the slideshow. For example, you can have one card (item) or multiple cards (items) in one screen of the slideshow, and if the width of the screen decreases it will change them to one card per screen. You can control when this happens by passing one of the breakpoint values ('xs', 'sm', 'md', 'lg' or 'xl') to the showOneCardForWidthLower property. And dozens of features that can be found here.

import React from "react";
import SlideshowWithPagination from "react-slideshow-with-pagination";

import Image1 from "../assets/images/image-1.jpg";
import Image2 from "../assets/images/image-2.jpg";
import Image3 from "../assets/images/image-3.jpg";
import Image4 from "../assets/images/image-4.jpg";

const CARDS_DETAILS = [
  { image: Image1, title: "1" },
  { image: Image2, title: "2" },
  { image: Image3, title: "3" },
  { image: Image4, title: "4" },
]

const Slideshow = () => {
  return (
    // Slideshow with preset card features along with pagination and arrow buttons
    <SlideshowWithPagination
      options={CARDS_DETAILS}
      showNumbers={true}
      showDots={true}
      showArrows={true}
      numberOfCardsPerScreen={3}
      showOneCardForWidthLower="sm"
      slideshowContainerMaxWidth={false}
      cardWidth={500}
      cardHeight={300}
    />
    // Slideshow with (only) pagination and arrow buttons feature
    <SlideshowWithPagination
      showNumbers={true}
      showDots={true}
      showArrows={true}
    >
      {CARDS_DETAILS.map((item, index) => (
        <React.Fragment key={index}>
          <img src={item.image} alt={item.title} />
          <p>{item.title}</p>
        </React.Fragment>
      ))}
    </SlideshowWithPagination>
  );
};

export default Slideshow

Note: Use option property only when you want to have access to the built-in card feature otherwise only pass items as children to slideshow (which in this case you only have pagination and arrows buttons).

The API documentation:

The react-slideshow-with-pagination API:

Important Note: You have to choose between passing your array (or items) as children to the slideshow (which provides only pagination and arrow buttons feature) or passing your array to the options property (which then in addition to the pagination and arrow buttons, you also have access to provided cards with dozens of features) because some properties only work when an array is passed to the options property. But keep it in mind that you must pass the array to the options property only with this accepted format: [{ image: "imageAddrress", title: "cardTitle" }, ...].

The react-swipeable-views API:

I used react-swipeable-views library for this project. So its properties can be passed to the react-slideshow-with-pagination as well. You can find out the full API documentation list of react-swipeable-views here.

License:

This project is licensed under the terms of the MIT license.