ComponentsSlider

Slider

The Slider component is a React component that provides a finite slideshow functionality with the ability to scroll through a set of slides. It creates a slider container that can be used to display and navigate through a collection of child components.

Installation

npm install @madeinhaus/slider

Import

import Slider from '@madeinhaus/slider';
import '@madeinhaus/slider/dist/index.css';

Props

  • children (required): An array of React nodes representing the slides to be displayed in the slider.

  • className (optional): Additional CSS class name(s) to be applied to the root element of the Slider component.

  • slideClassName (optional): Additional CSS class name(s) to be applied to each slide element in the Slider component.

  • renderNavigation (optional): A function that renders custom navigation elements based on the slider’s state. It receives an object with the following properties:

    • isBeginning (boolean): Indicates whether the slider is at the beginning - (first slide).
    • isEnd (boolean): Indicates whether the slider is at the end (last slide).
    • handleNavigation (function): A function to handle navigation actions. It takes a direction parameter (‘prev’ or ‘next’).

    CSS Variables and Defaults

    :root {
  --slider-scrollbar-color: #b8b8b8;
  --slider-scrollbar-border-width: 0.35rem;
  --slider-scrollbar-border-radius: 2rem;
  --slider-gap: 0;
  --slider-scroll-snap-type: none;
  --slider-scroll-snap-align: none;
}

Usage

SliderDemoBasic.tsx
import Slider from '@madeinhaus/slider';
import '@madeinhaus/slider/dist/index.css';
import styles from './SliderDemoBasic.module.css';
 
const SliderDemoBasic: React.FC = ({ images }: { images: string[] }) => {
  return (
    <Slider>
      {images.map((src, index) => (
        <figure key={index} className={styles.item}>
          <img src={src} />
          <figcaption>
            {index + 1} <br />
          </figcaption>
        </figure>
      ))}
    </Slider>
  );
};
 
export default SliderDemoBasic;
SliderDemoBasic.module.css
.item {
  width: 300px;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
SliderDemoStyled.tsx
import Slider from '@madeinhaus/slider';
import '@madeinhaus/slider/dist/index.css';
import styles from './SliderDemoStyled.module.css';
 
const SliderDemoStyled: React.FC = ({ images }: { images: string[] }) => {
  return (
    <Slider
      className={styles.root}
      slideClassName={styles.slide}
      renderNavigation={({ isBeginning, isEnd, handleNavigation }) => {
        return (
          <div className={styles.navigation}>
            <button
              className={styles.button}
              onClick={() => handleNavigation('prev')}
              aria-label="Previous"
              disabled={isBeginning}
            >
              {'<'} Previous
            </button>
            <button
              className={styles.button}
              onClick={() => handleNavigation('next')}
              aria-label="Next"
              disabled={isEnd}
            >
              Next {'>'}
            </button>
          </div>
        );
      }}
    >
      {images.map((src, index) => {
        return <img className={styles.image} key={index} src={src} />;
      })}
    </Slider>
  );
};
 
export default SliderDemoStyled;
SliderDemoStyled.module.css
.root {
  --slider-scrollbar-color: hsl(var(--nextra-primary-hue) 100% 77%/0.4);
  --slider-scrollbar-border-width: 0.3rem;
  --slider-scrollbar-border-radius: 0;
  --slider-gap: 0.3rem;
  --slider-scroll-snap-type: x mandatory;
  --slider-scroll-snap-align: start;
 
  padding: 0.5rem 0;
}
 
.slide {
  width: 200px;
  height: 200px;
}
 
.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
.navigation {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
 
.button:disabled {
  opacity: 0.5;
}