react-smol-carousel
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

react-smol-carousel

Lightweight React.js carousel implementation with react hooks support.

Install

npm install react-smol-carousel

Usage

import React from "react";
import ReactDOM from "react-dom";
import Slider, { SliderIndicator, useSliderController } from "../slider";

const App = () => {
  const slider = useSliderController({ infinite: true });
  React.useEffect(() => {
    console.log(`Current slide: ${slider.currentSlide}`);
  }, [slider.currentSlide]);
  React.useEffect(() => {
    const el = (e) => {
      switch (e.keyCode) {
        case 37:
          {
            // left
            slider.prevSlide();
          }
          break;
        case 39:
          {
            // right
            slider.nextSlide();
          }
          break;
      }
    };
    document.addEventListener("keydown", el);
    return () => {
      document.removeEventListener("keydown", el);
    };
  }, [slider]);
  return (
    <div className="app">
      <Slider
        className="app-slider"
        indicator={SliderIndicator.Dots}
        controller={slider}
      >
        <div>A</div>
        <div>Somewhat</div>
        <div>Important</div>
        <div>Slide</div>
      </Slider>
    </div>
  );
};

Examples

View examples in the /examples folder. To run them,

  1. First build
$ npm run-script build-examples
  1. Then open examples/index.html to interact with the examples library

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

0

Version

1.0.4

License

ISC

Unpacked Size

22.1 kB

Total Files

7

Last publish

Collaborators

  • gudmitrii