react-slide

A customizable and lightweight React slider component with support for arrows, dots, autoplay, and more.

📦 Installation

npm install react-slide

or

yarn add react-slide

🔧 Usage

import React from 'react';
import { Slider } from 'react-slide';

const App = () => {
  return (
    <Slider
      width="100%"
      height="300px"
      showArrows={true}
      arrowPosition="outside"
      arrowOffset={10}
      showDots={true}
      dotColor="#ddd"
      activeDotColor="#007bff"
      autoplay={false}
      dotSize={20}
    >
      <div
        style={{
          width: '100%',
          height: '100%',
          backgroundImage: `url('/your-image.jpg')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Slide A
      </div>
      <div style={{ background: 'teal', width: '100%', height: '100%' }}>Slide B</div>
      <div style={{ background: 'orange', width: '100%', height: '100%' }}>Slide C</div>
      <div style={{ display: 'flex', gap: '10px', width: '100%', height: '100%' }}>
        <div style={{ flex: 1, background: 'lightblue' }}>Slide D</div>
        <div style={{ flex: 1, background: 'lightgreen' }}>Slide E</div>
      </div>
    </Slider>
  );
};

export default App;

🧩 Props

| Prop | Type | Default | Description | |------------------|-----------|------------|-----------------------------------------------------------------------------| | width | string | '100%' | Width of the slider container | | height | string | '300px' | Height of the slider container | | showArrows | boolean | true | Show navigation arrows | | arrowPosition | string | 'inside' | Position of arrows: 'inside' or 'outside' | | arrowOffset | number | 10 | Distance in pixels from the edge (when arrowPosition is 'outside') | | showDots | boolean | true | Show pagination dots | | dotColor | string | '#ccc' | Default color of pagination dots | | activeDotColor | string | '#000' | Active dot color | | dotSize | number | 12 | Size of the pagination dots | | autoplay | boolean | false | Enable auto sliding | | autoplayInterval | number | 3000 | Interval (in ms) between auto slides (only if autoplay is true) |

📌 Notes

• All children passed to <Slider> should be valid React elements (e.g., <div>, <img>, etc.).
• Styling is applied inline or via CSS—flexible to your needs.
• Fully responsive and works out-of-the-box.

📃 License

ISC

Made with ❤️ by mina giergies