REROUSEL

SIMPLCITY

LIGHTNESS

ACCESSIBILITY

VERSATILITY

INFINITY

RELIABILITY

SIMPLCITY

LIGHTNESS

ACCESSIBILITY

VERSATILITY

INFINITY

RELIABILITY

SIMPLICITY

Set up your carousel in the blink of an eye. All you have to do is installing the package and the component is ready to use!

VERSATILITY

Show off your products or holiday pictures - Rerousel supports all types of JSX elements, so you don't have to worry about compatibility.

LIGHTNESS

Rerousel is the lightest working infinite react carousel available to download from the NPM, using only the packages that are necessary.

REROUSEL SANDBOX

function App() {
  const ref = useRef(null);

  const Item = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100%/2);
    height: 100px;
    font-family: Signika;
    font-weight: bold;
    font-size: 1.5em;
    border: solid 1px black;
    background-color: #61DAFB;
    
    @media(max-width: 1150px) {
        width: 100%
    }
  `;

  return (
    <Rerousel itemRef={ref}>
      <Item ref={ref}>1</Item>
      <Item>2</Item>
      <Item>3</Item>
      <Item>4</Item>
      <Item>5</Item>
    </Rerousel>
  );
}

function App() {
  const ref = useRef(null);
  const Item = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100%/2);
    height: 100px;
    font-family: Signika;
    font-weight: bold;
    font-size: 1.5em;
    border: solid 1px black;
    background-color: #61DAFB;
    
    @media(max-width: 1150px) {
        width: 100%
    }
  `;
  return (
    <Rerousel itemRef={ref}>
      <Item ref={ref}>1</Item>
      <Item>2</Item>
      <Item>3</Item>
      <Item>4</Item>
      <Item>5</Item>
    </Rerousel>
  );
}

REROUSEL PREVIEW

Testimonials carousel