Skip to main content

React

Carousel is written using plain JavaScript with no third party libraries. There is currently no official wrapper for React, but it's quite easy to create one.

Example of a React function component that uses hooks:

import React, { useRef, useEffect } from "react";import { Carousel as NativeCarousel } from "/static/lib/[email protected]/carousel.esm.js";
import "/static/lib/[email protected]/carousel.css";
function ReactCarousel(props) {  const wrapper = useRef(null);
  useEffect(() => {    const items = props.items || [];    const opts = props.options || {};
    opts.slides = [...items].map((val) => {      return { html: val };    });
    const instance = new NativeCarousel(wrapper.current, opts);
    return () => {      instance.destroy();    };  }, []);
  return <div className={`carousel ${props.class || ""}`} ref={wrapper}></div>;}
export default ReactCarousel;

Usage example:

<Carousel items={["1", "2", "3", "4", "5"]} options={{ infinite: false }} />

Result: