@types/react-slick

What is @types/react-slick?

@types/react-slick provides TypeScript definitions for the react-slick package, which is a popular carousel component for React applications.

What are @types/react-slick's main functionalities?

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>
);

Other packages similar to @types/react-slick

react-responsive-carousel

react-responsive-carousel is another popular carousel component for React. It offers similar functionality to react-slick but focuses more on responsiveness and ease of use. It also provides TypeScript definitions out of the box.

swiper

swiper is a modern mobile touch slider with hardware-accelerated transitions. It is highly customizable and supports a wide range of features, including parallax effects, lazy loading, and more. Swiper also provides TypeScript definitions and is widely used in both web and mobile applications.

pure-react-carousel

pure-react-carousel is a highly customizable and lightweight carousel component for React. It provides a more modular approach compared to react-slick, allowing developers to build their own navigation and pagination components. It also includes TypeScript definitions.

README

Installation

npm install --save @types/react-slick

Summary

This package contains type definitions for react-slick (https://github.com/akiran/react-slick).

Details

Files were exported from https://www.github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-slick

Additional Details

• Last updated: Fri, 02 Jun 2017 13:38:50 GMT
• Dependencies: react
• Global values: none

Credits

These definitions were written by Andrey Balokha https://github.com/andrewBalekha, Giedrius Grabauskas https://github.com/GiedriusGrabauskas.