mostafa-drz / react-mini-slider

A minimal slider for React

react-mini-slider

Install

Yarn

yarn add react-mini-slider

npm

npm install react-mini-slider

Simple Example

import React from "react";
import "./App.css";
import { Slider } from "react-mini-slider";

function App() {
  return (
    <div className="App">
      <Slider className="slider-container" toolbarPosition="bottom-left">
        <SlideA />
        <SlideB />
        <SlideC />
        <SlideD />
      </Slider>
    </div>
  );
}

function SlideA() {
  return <h1>I am Slide A</h1>;
}
function SlideB() {
  return <h1>I am Slide B</h1>;
}
function SlideC() {
  return <h1>I am Slide C</h1>;
}
function SlideD() {
  return <h1>I am Slide D</h1>;
}
export default App;

Custom toolbar example

If you need a custom toolbar which in most cases you do (mine is really ugly, sorry) then you can build your toolbar component and pass it to the Slider. Here is an example:

import React from "react";
import "./App.css";
import { Slider, useSlider } from "react-mini-slider";

function App() {
  return (
    <div className="App">
      <Slider
        className="slider-container"
        toolbarPosition={{ top: 0, right: "30px" }}
        toolbar={<FancyToolbar />}
      >
        <SlideA />
        <SlideB />
        <SlideC />
        <SlideD />
      </Slider>
    </div>
  );
}

function SlideA() {
  return (
    <img
      src="https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80"
      alt="horse-1"
    />
  );
}
function SlideB() {
  return (
    <img
      src="https://images.unsplash.com/photo-1504310977373-186d29f99322?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
      alt="horse-2"
    />
  );
}
function SlideC() {
  return (
    <img
      src="https://images.unsplash.com/photo-1553284966-19b8815c7817?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
      alt="horse-3"
    />
  );
}
function SlideD() {
  return (
    <img
      src="https://images.unsplash.com/photo-1566251037378-5e04e3bec343?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Nnx8aG9yc2V8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
      alt="horse-4"
    />
  );
}

function FancyToolbar() {
  const {
    handleNext,
    handleGoToFirst,
    handleGoToLast,
    handlePrevious,
    isFirst,
    isLast,
  } = useSlider();
  return (
    <>
      <button onClick={handleNext} disabled={isLast} className={`fancy-button`}>
        Next
      </button>
      <button
        onClick={handlePrevious}
        disabled={isFirst}
        className="fancy-button"
      >
        Previous
      </button>
      <button
        onClick={handleGoToFirst}
        disabled={isFirst}
        className="fancy-button"
      >
        Go To First
      </button>
      <button
        onClick={handleGoToLast}
        disabled={isLast}
        className="fancy-button"
      >
        Go To Last
      </button>
    </>
  );
}
export default App;