Carousels are a dynamic way to display rotating content like announcements, images, or events. In SharePoint Framework (SPFx), using React with react-slick, we can build a smooth, responsive, and interactive carousel quickly and easily..

This article will guide you through the step-by-step process of adding a Slick Carousel to your SPFx React component.

Step 1: Install Necessary Packages

Start by installing the required packages in your SPFx project:

npm install react-slick slick-carousel

These include:

react-slick: The React wrapper for Slick Carousel

slick-carousel: The core Slick styles and JS

Step 2: Import Styles and Component

In your React component file, import the styles and Slider component:

import * as React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Step 3: Define Carousel Settings and Render Items

Now, define the carousel logic and render some sample slides:

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

type Slide = {
  id: number;
  title: string;
  description: string;
};

const SlickCarousel: React.FC = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 600,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: true,
  };

  const slides: Slide[] = [
    { id: 1, title: "Slide One", description: "Welcome to Slide 1" },
    { id: 2, title: "Slide Two", description: "This is Slide 2" },
    { id: 3, title: "Slide Three", description: "Enjoy Slide 3" },
  ];

  return (
        {slides.map((slide) => (
              style={{                height: "200px",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                backgroundColor: "#f0f0f0",
                borderRadius: "8px",
                padding: "20px",
                textAlign: "center",
              }}
            > 
            {slide.title}
            {slide.description}
        ))}
  );
};

export default SlickCarousel;

Step 4: Use the Component in SPFx

Once created, use the SlickCarousel component inside your SPFx Web Part's render method:

public render(): void {
  const element: React.ReactElement = React.createElement(SlickCarousel);
  ReactDom.render(element, this.domElement);
}

Optional: Customize Your Carousel

You can further customize the carousel with these options:
responsive: Make it mobile-friendly by showing different numbers of slides
fade: true: Add a fading transition between slides
customPaging: Replace dot indicators with thumbnails or icons
beforeChange, afterChange: Trigger actions during slide transitions

For more, see the react-slick docs.

Summary

By following the above steps, you’ve successfully built a Slick Carousel in your SPFx project using react-slick. This lightweight, flexible, and mobile-friendly slide.

How to Add a Slick Carousel in SPFx Using React