Creating a Slick Carousel in SPFx Using React

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

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 Components

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.

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

  const slides = [
    { 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 (
    <div style={{ width: "90%", margin: "0 auto", paddingTop: "20px" }}>
      <Slider {...settings}>
        {slides.map((slide) => (
          <div key={slide.id}>
            <div
              style={{
                height: "200px",
                backgroundColor: "#f0f0f0",
                borderRadius: "8px",
                padding: "20px",
                textAlign: "center",
              }}
            >
              <h3>{slide.title}</h3>
              <p>{slide.description}</p>
            </div>
          </div>
        ))}
      </Slider>
    </div>
  );
};

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: actual: Add a fading transition between slides
• customPaging: Replace dot indicators with thumbnails or icons
• beforeChange, afterChange: Trigger actions during slide transitions

For more information, see the React Slick documentation.

Summary

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