Cycle Mode Restart

Example

Pagination

• 
• 
• 
• 
• 
• 
• 
• 
• 

No pagination

• 
• 

Code

import { TileSlider, type RenderTile, type RenderControl, CYCLE_MODE_STOP } from '@videodock/tile-slider';

type Tile = {
  title: string;
  image: string;
};

// create example data set with 10 tiles
const items: Tile[] = Array.from({ length: 10 }, (_, index) => ({
  title: `Tile ${index}`,
  image: `/img/${index}.jpg`,
}));

const renderTile: RenderTile<Tile> = ({ item, isVisible }) => (
  <div className={'exampleTile'}>
    <img src={item.image} alt={item.title} />
  </div>
);

const renderLeftControl: RenderControl = ({ onClick }) => (
  <button className="control" onClick={onClick}>
    <IconLeft />
  </button>
);

const renderRightControl: RenderControl = ({ onClick }) => (
  <button className="control" onClick={onClick}>
    <IconRight />
  </button>
);

const Slider = () => {
  return (
    <TileSlider
      cycleMode={CYCLE_MODE_RESTART}
      tilesToShow={3}
      renderTile={renderTile}
      items={items}
      renderRightControl={renderRightControl}
      renderLeftControl={renderLeftControl}
    />
  );
};