Pagiflow React
Documentation

import { Pagiflow, PagiflowSlide } from 'pagiflow/react';
import 'pagiflow/css';

export default function App() {
  return (
    <Pagiflow id="slider-a" nav loop itemsPerSlide={1}>
      {/* PagiflowSlide is recommended for clarity */}
      <PagiflowSlide className="my-slide">
        <div>Slide 1</div>
      </PagiflowSlide>
      
      {/* You can also use plain elements */}
      <div>Slide 2</div>
      <div>Slide 3</div>
    </Pagiflow>
  );
}

'use client'; // Required for Pagiflow

import { Pagiflow, PagiflowSlide } from 'pagiflow/react';
import 'pagiflow/css';

export default function NextSlider() {
  return (
    <Pagiflow loop nav itemsPerSlide={3}>
      <PagiflowSlide>Slide 1</PagiflowSlide>
      <PagiflowSlide>Slide 2</PagiflowSlide>
      <PagiflowSlide>Slide 3</PagiflowSlide>
    </Pagiflow>
  );
}

import { usePagiflow } from 'pagiflow/react';

function MyCustomSlider() {
  const { sliderRef, instance, next, prev, goTo, play, pause, togglePlayPause, setOptions, reInit, currentIndex } = usePagiflow({
    loop: true,
    itemsPerSlide: 1
  });

  return (
    <div className="custom-container">
      <div className="controls">
        <button onClick={prev}>Previous</button>
        <span>Slide {currentIndex + 1}</span>
        <button onClick={next}>Next</button>
        <button onClick={() => goTo(0)}>First</button>
        <button onClick={play}>Play</button>
        <button onClick={pause}>Pause</button>
        <button onClick={togglePlayPause}>Toggle</button>
        <button onClick={() => setOptions({ gap: 24 }, true)}>Gap 24</button>
        <button onClick={() => reInit({ loop: false })}>ReInit</button>
        <span>Ready: {instance ? 'yes' : 'no'}</span>
      </div>

      <div ref={sliderRef} className="my-slider">
        <div className="slide-1">Slide 1</div>
        <div className="slide-2">Slide 2</div>
      </div>
    </div>
  );
}

<Pagiflow
  renderNav={({ next, prev, currentIndex }) => (
    <div className="my-custom-nav">
      <button onClick={prev}>Left</button>
      <button onClick={next}>Right</button>
    </div>
  )}
  renderPagination={({ goTo, currentIndex, total }) => (
    <div className="my-dots">
      {Array.from({ length: total }).map((_, i) => (
        <button 
          key={i} 
          className={currentIndex === i ? 'active' : ''}
          onClick={() => goTo(i)}
        />
      ))}
    </div>
  )}
>
  {/* slides */}
</Pagiflow>

const options = {
  nav: true,
  loop: true,
  itemsPerSlide: 3,
  autoplay: true,
  autoplayDelay: 2500
};

<Pagiflow {...options}>...</Pagiflow>

import { useRef } from 'react';
import { Pagiflow, type PagiflowHandle } from 'pagiflow/react';

export default function SliderControls() {
  const sliderRef = useRef<PagiflowHandle | null>(null);

  return (
    <>
      <button onClick={() => sliderRef.current?.next()}>Next</button>
      <button onClick={() => sliderRef.current?.prev()}>Prev</button>
      <button onClick={() => sliderRef.current?.goTo(2)}>Go to 3rd</button>
      <button onClick={() => sliderRef.current?.play()}>Play</button>
      <button onClick={() => sliderRef.current?.pause()}>Pause</button>
      <button onClick={() => sliderRef.current?.setOptions({ gap: 24 }, true)}>Update Options</button>
      <button onClick={() => sliderRef.current?.reInit()}>ReInit</button>

      <Pagiflow ref={sliderRef} nav loop itemsPerSlide={1}>
        {/* slides */}
      </Pagiflow>
    </>
  );
}

import { useRef } from 'react';
import {
  Pagiflow,
  PagiflowSlide,
  type PagiflowHandle,
  usePagiflow,
} from 'pagiflow/react';
import 'pagiflow/css';

export default function Example() {
  const sliderRef = useRef<PagiflowHandle | null>(null);

  const {
    sliderRef: customRef,
    instance,
    currentIndex,
    next,
    prev,
    goTo,
    play,
    pause,
    togglePlayPause,
    setOptions,
    reInit,
  } = usePagiflow({
    loop: true,
    nav: true,
    autoplay: true,
    autoplayDelay: 2500,
    itemsPerSlide: 1,
  });

  return (
    <div>
      <h3>Component API + Ref Methods</h3>
      <button onClick={() => sliderRef.current?.prev()}>Prev</button>
      <button onClick={() => sliderRef.current?.next()}>Next</button>
      <button onClick={() => sliderRef.current?.goTo(2)}>Go to 3</button>
      <button onClick={() => sliderRef.current?.resume()}>Resume</button>

      <Pagiflow ref={sliderRef} loop nav paginate onSlideChange={(i) => console.log(i)}>
        <PagiflowSlide>Slide A</PagiflowSlide>
        <PagiflowSlide>Slide B</PagiflowSlide>
        <PagiflowSlide>Slide C</PagiflowSlide>
      </Pagiflow>

      <hr />

      <h3>usePagiflow Hook API</h3>
      <button onClick={prev}>Prev</button>
      <button onClick={next}>Next</button>
      <button onClick={() => goTo(0)}>First</button>
      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
      <button onClick={togglePlayPause}>Toggle</button>
      <button onClick={() => setOptions({ gap: 24 }, true)}>Gap 24</button>
      <button onClick={() => reInit({ loop: false })}>ReInit</button>

      <p>Current index: {currentIndex}</p>
      <p>Real index (core): {instance?._getRealIndex?.()}</p>

      <div ref={customRef} className="my-slider">
        <div className="slide-1">One</div>
        <div className="slide-2">Two</div>
        <div className="slide-3">Three</div>
      </div>
    </div>
  );
}