Actual Responsive Carousel

Documentation

Installation

npm:

npm install actual-responsive-carousel

yarn:

yarn add actual-responsive-carousel

Example

import React from "react";
import { Carousel, Slide } from "actual-responsive-carousel";

export default const SimpleSlider = () => {
  let props = {
    auto: true,
    height: 400,
    duration: 3000,
    breakpoints: {
      phone: 1,
      tab: 2,
      laptop: 3,
      largeScreen: 5,
      extraLargeScreen: 8,
    },
  };

  return (
    <Carousel {...props}>
      <h3>1</h3>
      <h3>2</h3>
      <h3>3</h3>
      <h3>4</h3>
      <h3>5</h3>
    </Carousel>
  );
}

Props

| name | description | type | default value | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | --------------------------- | | height | This will set the height of the carousel container. | Number (in px) | unset | | width | This will set the width of the carousel container. | Number (in px) | unset | | auto | This determines if the carousel slides would play without user interaction | Boolean | false | | noControls | This determines if the controls of the carousel (the left and right arrow) will show. If set to false the user will not be able to control the carousel. | Boolean | false | | leftButton | This is the left arrow button of the carousel. Passing a ReactNode will replace the default button | ReactNode | unset | | rightButton | This is the right arrow button of the carousel. Passing a ReactNode will replace the default button. | ReactNode | unset | | duration | This is the duration that will be spent on each slide if auto is set to true. | Number (in milliseconds) | 5000 | | infinite | This determines if the carousel will scroll infinitely (when the carousel reaches the end, it goes back to the first slide and vice versa) | Boolean | true | | breakPoints | This is an object that allows you set the number of slides to be show at pre-specified break points. For more information check here. | JavaScript object | check here |

Break points

The breakpoints props look like this:

{
  phone: 1,               // max-width: 480px
  tab: 3,                 // max-width: 768px
  laptop: 4,              // max-width: 1399px
  largeScreen: 6,         // max-width: 1959px
  extraLargeScreen: 10,   // max-width: > 1960px
}

The default values for each break point are as follows:

phone: 1;
tab: 2;
laptop: 3;
largeScreen: 5;
extraLargeScreen: 8;