@bolttech/molecules-slider NPM

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

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.

@bolttech/atoms-button @bolttech/default-theme @bolttech/frontend-foundations react styled-components

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago