react-flex-slide

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