With ref

Example

• 
• 
• 
• 
• 
• 
• 
• 
• 

---

State

Current index: 0

Current item index: 0

Current page: 0

Controls

slide(direction: 'left' | 'right')

slideToIndex(index: number)

slideToPage(page: number)

Code

import { TileSlider, type TileSliderRef } from '@videodock/tile-slider';

const Slider = () => {
  const tileSliderRef = useRef<TileSliderRef>();
  const [state, setState] = useState({ index: 0, itemIndex: 0, page: 0 });

  return (
    <>
      <TileSlider
        sliderRef={tileSliderRef}
        tilesToShow={3}
        renderTile={renderTile}
        items={items}
        renderRightControl={renderRightControl}
        renderLeftControl={renderLeftControl}
        onSlideEnd={({ index, itemIndex, page }) => setState({ index, itemIndex, page })}
      />
      <hr />
      <h3>State</h3>
      <div>
        <label>Current index:</label> {state.index}{' '}
      </div>
      <div>
        <label>Current item index:</label> {state.itemIndex}{' '}
      </div>
      <div>
        <label>Current page:</label> {state.page}
      </div>
      <h3>Controls</h3>
      <div>
        <strong>slide(direction: &apos;left&apos; | &apos;right&apos;)</strong>
        <br />
        <button onClick={() => tileSliderRef.current?.slide('left')}>Slide left</button>{' '}
        <button onClick={() => tileSliderRef.current?.slide('right')}>Slide right</button>
      </div>
      <div>
        <strong>slideToIndex(index: number)</strong>
        <br />
        <button onClick={() => tileSliderRef.current?.slideToIndex(0)}>Slide to index: 0</button>{' '}
        <button onClick={() => tileSliderRef.current?.slideToIndex(10)}>Slide to index: 10</button>{' '}
        <button onClick={() => tileSliderRef.current?.slideToIndex(100)}>Slide to index: 100</button>
        <button onClick={() => tileSliderRef.current?.slideToIndex(105, true)}>Slide to index: 105 (closest)</button>
      </div>
      <div>
        <strong>slideToPage(page: number)</strong>
        <br />
        <button onClick={() => tileSliderRef.current?.slideToPage(0)}>Slide to page 0</button>{' '}
        <button onClick={() => tileSliderRef.current?.slideToPage(3)}>Slide to page 3</button>
      </div>
    </>
  );
};