Usage Instructions.

You will need to import the Carousel Provider and give it a configuration in value

CarouselProvider

This is the provider component that take certain values and passes it along the component tree.

These are the default values.

{
    width: "100%",
    height: "100%",
    visibleCount: 1,
    visibleIndex: 1,
    totalSlides: 4,
    infinite: true,
    slideshow: false,
    slideshowDuration: 1000,
    transitionDuration: "0.4s"
}

height and width determine the sizing of the page, visibleCount is the number of slides that are visible. visibleIndex defines on which slide the page will open up. totalSlides should be equal to the number of individual slides that have been provided.

Slider

Slider is the main wrapper component which inherits properties from the CarouselProvider and uses them to render the slides.

children

Element

required

withButton

Bool

true

buttonStyling

String

rightButtonText

String

"Next"

leftButtonText

String

"Prev"

Slide

Slides are the units of sliders. They require the index prop which should always be in ascending order as you go down the slide tree.

index

Number

required

children

Element

styling

String

Buttons

As of now there are two buttons available for usage, RightButton and LeftButton which can be disabled bypassing withButtons={false} to Slider. However they can be styled and the content within them change in the following way.

<Slider buttonStyling= {`
            border: none;
            background: transparent;
            box-shadow: 0 0 3px #121212;
            border-radius: 50%;
            transition: all 0.2s;
            outline:none;
            font-size: 22px;
            color: #121212;
            &:hover {
                box-shadow: 0 0 10px;
                transform: scale(1.1);
            }
        `}
        leftButtonText={<strong>{"<"}</strong>}
        rightButtonText={<strong>{">"}</strong>}
>
</Slider>

Default Usage

hi

hi2

hi3

hi4

<div style={{ height: '300px', width: '100%' }}>
  <CarouselProvider
    value={{
      width: '100%',
      height: '100%',
      visibleCount: 1,
      visibleIndex: 1,
      totalSlides: 4,
      infinite: true,
      slideshow: false,
      slideshowDuration: 1000,
      transitionDuration: '0.4s',
    }}
  >
    <Slider>
      <Slide index={1}>
        <h1>hi</h1>
      </Slide>
      <Slide index={2}>
        <h1>hi2</h1>
      </Slide>
      <Slide index={3}>
        <h1>hi3</h1>
      </Slide>
      <Slide index={4}>
        <h1>hi4</h1>
      </Slide>
    </Slider>
  </CarouselProvider>
</div><div style={{ height: '300px', width: '100%' }}>
  <CarouselProvider
    value={{
      width: '100%',
      height: '100%',
      visibleCount: 1,
      visibleIndex: 1,
      totalSlides: 4,
      infinite: true,
      slideshow: false,
      slideshowDuration: 1000,
      transitionDuration: '0.4s',
    }}
  >
    <Slider>
      <Slide index={1}>
        <h1>hi</h1>
      </Slide>
      <Slide index={2}>
        <h1>hi2</h1>
      </Slide>
      <Slide index={3}>
        <h1>hi3</h1>
      </Slide>
      <Slide index={4}>
        <h1>hi4</h1>
      </Slide>
    </Slider>
  </CarouselProvider>
</div>

Slideshow mode

Slideshow requires you to also set infinite as true. Slideshow duration dictates how fast the slides change.

hi

hi2

<div style={{ height: '300px', width: '100%' }}>
  <CarouselProvider
    value={{
      width: '100%',
      height: '100%',
      visibleCount: 1,
      visibleIndex: 1,
      totalSlides: 2,
      infinite: true,
      slideshow: true,
      slideshowDuration: 1000,
      transitionDuration: '0.4s',
    }}
  >
    <Slider>
      <Slide index={1}>
        <h1>hi</h1>
      </Slide>
      <Slide index={2}>
        <h1>hi2</h1>
      </Slide>
    </Slider>
  </CarouselProvider>
</div><div style={{ height: '300px', width: '100%' }}>
  <CarouselProvider
    value={{
      width: '100%',
      height: '100%',
      visibleCount: 1,
      visibleIndex: 1,
      totalSlides: 2,
      infinite: true,
      slideshow: true,
      slideshowDuration: 1000,
      transitionDuration: '0.4s',
    }}
  >
    <Slider>
      <Slide index={1}>
        <h1>hi</h1>
      </Slide>
      <Slide index={2}>
        <h1>hi2</h1>
      </Slide>
    </Slider>
  </CarouselProvider>
</div>

Visible Count

If you want to alter the number of slides that are visible on page, modify the visibleCount Property. If any slides are left over after distribution, they occupy available amount of space equally.

hi

hi2

hi3

<div style={{ height: '300px', width: '100%' }}>
  <CarouselProvider
    value={{
      width: '100%',
      height: '100%',
      visibleCount: 2,
      visibleIndex: 1,
      totalSlides: 3,
      infinite: true,
      slideshow: false,
      slideshowDuration: 1000,
      transitionDuration: '0.4s',
    }}
  >
    <Slider>
      <Slide index={1}>
        <h1>hi</h1>
      </Slide>
      <Slide index={2}>
        <h1>hi2</h1>
      </Slide>
      <Slide index={3}>
        <h1>hi3</h1>
      </Slide>
    </Slider>
  </CarouselProvider>
</div><div style={{ height: '300px', width: '100%' }}>
  <CarouselProvider
    value={{
      width: '100%',
      height: '100%',
      visibleCount: 2,
      visibleIndex: 1,
      totalSlides: 3,
      infinite: true,
      slideshow: false,
      slideshowDuration: 1000,
      transitionDuration: '0.4s',
    }}
  >
    <Slider>
      <Slide index={1}>
        <h1>hi</h1>
      </Slide>
      <Slide index={2}>
        <h1>hi2</h1>
      </Slide>
      <Slide index={3}>
        <h1>hi3</h1>
      </Slide>
    </Slider>
  </CarouselProvider>
</div>

Usage Instructions.

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}CarouselProvider

Slider

Slide

Buttons

Default Usage

hi

hi2

hi3

hi4

Slideshow mode

hi

hi2

Visible Count

hi

hi2

hi3

CarouselProvider