Responsive

You can use the useResponsiveSize hook to make the tilesToShow prop based on predetermined breakpoints. Resize this page to see it in action. The useResponsiveSize hook is optimized and only re-renders when the current breakpoint changes.

Example

• 
• 
• 
• 
• 
• 
• 
• 
• 

Code

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

const Slider = () => {
  const [tilesToShow] = useResponsiveSize([{ xs: 2, sm: 2, md: 3, lg: 4, xl: 5 }]);

  return (
    <TileSlider
      tilesToShow={tilesToShow}
      renderTile={renderTile}
      items={items}
      renderRightControl={renderRightControl}
      renderLeftControl={renderLeftControl}
    />
  );
};

Multiple configurations:

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

const Slider = () => {
  const [largeSlider, defaultSlider] = useResponsiveSize([
    { xs: 1, sm: 2, md: 4, lg: 7, xl: 9 }, // configuration for the large slider
    { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }, // configuration for the default slider
  ]);

  return (
    <>
      <TileSlider
        tilesToShow={largeSlider}
        renderTile={renderTile}
        items={items}
        renderRightControl={renderRightControl}
        renderLeftControl={renderLeftControl}
      />
      <TileSlider
        tilesToShow={defaultSlider}
        renderTile={renderTile}
        items={items}
        renderRightControl={renderRightControl}
        renderLeftControl={renderLeftControl}
      />
    </>
  );
};