Implement Carousel in SPFx webpart using react-slick

React Slick is a carousel component built with react. It is a smooth and simple package to implement slider with multiple items.

In this article, we will get the items from SharePoint list and display them in a carousel view.

Step I – Create a new webpart project 

  1. Open a command prompt . Create a new directory for SPFx solution using command:
    md reactCarousel-WP
  2. Navigate to the above created directory :
    cd reactCarousel-WP
  3. Create a solution by running a Yeoman SharePoint Generator :
    yo @microsoft/sharepoint
  4. When prompted:
    • What is your solution name?: react-carousel-wp
    • Which baseline packages do you want to target for your component(s)?: SharePoint Online only (latest)
    • Where do you want to place the files?: Use the current folder
    • Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?: N
    • Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant?: N
    • Which type of client-side component to create?: WebPart
    • What is your Web part name?: react-carousel-wp
    • What is your Web part description?:react-carousel-wp description
    • Which framework would you like to use?: React

Step II  – Install Dependencies for react-slick 

  1. On the command prompt , run below command to install react-slick :
       npm install react-slick --save
       yarn add react-slick
  2. Include css and font :
    npm install slick-carousel
//import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

      3.  slick-carousel has a peer-dependancy on jQuery . So you need to install jquery
dependency as well :
            npm install jquery@>=1.8.0 --save-dev

4.  Now install PNPjs library which is required to call a SharePoint list for fetching list items :
            npm install @pnp/sp --save

Step III – Fetch items from SharePoint list using PNPjs

  1. Create a new .ts file where we will write a REST call to fetch the list information .
  2. You can create a separate folder called services under src and then create a file named CarouselService.ts within services folder .
    (Note : You can give any name of your choice to folders and files)
  3. Write below lines of code in CarouselService.ts :

import { sp } from "@pnp/sp/presets/core";

export async function getBannerConfiguration() {
    return sp.web.lists

       where BannerConfiguration is list name .

Step IV – ReactCarouselWp.tsx

import * as React from 'react';
import styles from './ReactCarouselWp.module.scss';
import { IReactCarouselWpProps } from './IReactCarouselWpProps';
import { escape } from '@microsoft/sp-lodash-subset';
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { getBannerConfiguration } from '../../../services/CarouselService';

export interface IReactCarouselWpState {
  bannerCardData : any[]
const settings = {
  centerMode: false,
  dots: true,
  infinite: true,
  lazyLoad: true,
  slidesToScroll: 1,
  slidesToShow: 1,
  arrows: false,
  autoplay: true,
  speed: 1500,
  pauseOnHover: false,

export default class ReactCarouselWp extends React.Component<IReactCarouselWpProps, IReactCarouselWpState> {
  public constructor(props:IReactCarouselWpProps,state:IReactCarouselWpState){
    this.state ={
      bannerCardData : []
  public async componentDidMount(){
    let bannerDetails = await getBannerConfiguration();

      bannerCardData : bannerDetails
  public render(): React.ReactElement<IReactCarouselWpProps> {
    const {
    } = this.state
    return (
      <div  className={` ${styles.row}`}>
         <div className="col-12 col-md-6">
            <Slider {...settings}>
      , i) => {
                  return (
                    <div  className={styles.Bannercard}>

Step V – ReactCarouselWp.module.scss

@import '~office-ui-fabric-react/dist/sass/References.scss';

.reactCarouselWp {
  .container {
    max-width: 700px;
    margin: 0px auto;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);

  .row {
    @include ms-Grid-row;
    @include ms-fontColor-white;
    background-color: $ms-color-themeDark;
    padding: 20px;

  .column {
    @include ms-Grid-col;
    @include ms-lg10;
    @include ms-xl8;
    @include ms-xlPush2;
    @include ms-lgPush1;

  .title {
    @include ms-font-xl;
    @include ms-fontColor-white;

  .subTitle {
    @include ms-font-l;
    @include ms-fontColor-white;

  .description {
    @include ms-font-l;
    @include ms-fontColor-white;

  .button {
    // Our button
    text-decoration: none;
    height: 32px;

    // Primary Button
    min-width: 80px;
    background-color: $ms-color-themePrimary;
    border-color: $ms-color-themePrimary;
    color: $ms-color-white;

    // Basic Button
    outline: transparent;
    position: relative;
    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: $ms-font-size-m;
    font-weight: $ms-font-weight-regular;
    border-width: 0;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    padding: 0 16px;

    .label {
      font-weight: $ms-font-weight-semibold;
      font-size: $ms-font-size-m;
      height: 32px;
      line-height: 32px;
      margin: 0 4px;
      vertical-align: top;
      display: inline-block;
.Bannercard {
  padding: 20px 0;
  background-color: #0460a9;
  color: #ffffff;
  height: 184px;
  padding-left: 30px;

  h2 {
    font-size: 24px;
    margin-bottom: 16px;
  p {
    font-size: 14px;
    margin-bottom: 20px;
    height: 63px;


Run gulp serve in command prompt and add the react-carousel-wp webpart on the workbench .
The workbench URL will be – 


You will see a carousel as shown below – 

You may also like...

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: