Slider Component

The Slider component is a customizable React component that displays Slides that will automaticaly change in an animated way to show content in a horizontal view.

Installation

To use the Slider component, you need to install the required dependencies:

npm install @bolttech/molecules-slider

or

yarn add @bolttech/molecules-slider

Usage

You can utilize the Slider component by importing it and including it in your JSX. Here's an example:

import React from 'react';
import { Slider, SliderItem } from '@bolttech/molecules-slider';
import { BolttechThemeProvider } from '@bolttech/frontend-foundations';
import { bolttechTheme } from '@bolttech/default-theme';

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Slider>
        <SliderItem>
          <p>slide 1</p>
        </SliderItem>
        <SliderItem>
          <p>slide 2</p>
        </SliderItem>
        <SliderItem>
          <p>slide 3</p>
        </SliderItem>
        <SliderItem>
          <p>slide 4</p>
        </SliderItem>
        <SliderItem>
          <p>slide 5</p>
        </SliderItem>
      </Slider>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Slider component accepts the following props:

| Prop | Type | Description | | --------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | id | string | Component identification. | | dataTestId | string | React-testing-library identification. | | currentPage | number | The current page of the slider. | | slidesPerPage | number | Number of slides that should be shown per page. On mobile, it will automatically be 1 | | showArrows | boolean | Boolean representing if the arrows for next and previous page should be displayed. On mobile, they will be automatically hidden. | | showBullets | boolean | Boolean representing if the bullets representing the pages should be displayed. | | duration | number | Durations in milliseconds of each slide. If 0 is provided, they will not change automatically. | | count | number | If provided, this will be used to count the number of slides. If not, the Slider will count it automatically. | | onChange | (index?: number) => void | Function that runs when a slide change if you need to run any code when it changes. | | children | ReactNode | The content of the Sliders. This should be a SliderItem with the content inside. |

Functionality

The Slider component provides the following functionality:

• Can have multiple slides per page.
• Automaticaly change slides based on the duration provided.
• Can stay on the same slide indefinetly if duration={0} provided.
• Needs to be dragged at least 75px to change slides, if not, it will stay on the same slide.
• On mobile (767px and lower) it will always display only 1 slide per page.

Contributions

Contributions to the Slider component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.