@types/react-slick

Basic Carousel

This code demonstrates a basic carousel setup using react-slick with TypeScript. The settings object configures the carousel to show dots, loop infinitely, and have a transition speed of 500ms.

import Slider from 'react-slick';

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1
};

const BasicCarousel = () => (
  <Slider {...settings}>
    <div><h3>Slide 1</h3></div>
    <div><h3>Slide 2</h3></div>
    <div><h3>Slide 3</h3></div>
  </Slider>
);

Responsive Carousel

This code demonstrates a responsive carousel setup using react-slick with TypeScript. The settings object includes a responsive array that adjusts the number of slides shown based on the screen width.

import Slider from 'react-slick';

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
};

const ResponsiveCarousel = () => (
  <Slider {...settings}>
    <div><h3>Slide 1</h3></div>
    <div><h3>Slide 2</h3></div>
    <div><h3>Slide 3</h3></div>
  </Slider>
);

Custom Arrows

This code demonstrates how to use custom arrows in a react-slick carousel with TypeScript. The NextArrow and PrevArrow components are used to customize the appearance and behavior of the navigation arrows.

import Slider from 'react-slick';

const NextArrow = (props) => {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: 'block', background: 'red' }}
      onClick={onClick}
    />
  );
};

const PrevArrow = (props) => {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: 'block', background: 'green' }}
      onClick={onClick}
    />
  );
};

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  nextArrow: <NextArrow />, 
  prevArrow: <PrevArrow />
};

const CustomArrowsCarousel = () => (
  <Slider {...settings}>
    <div><h3>Slide 1</h3></div>
    <div><h3>Slide 2</h3></div>
    <div><h3>Slide 3</h3></div>
  </Slider>
);