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 
      npm install react-slick --save
   yarn
      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
      .getByTitle("BannerConfiguration")
      .items
      .get();
  }

       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){
    super(props);
    this.state ={
      bannerCardData : []
    }
  }
  
  public async componentDidMount(){
    let bannerDetails = await getBannerConfiguration();

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

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

Output –

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

<siteurl>/_layouts/15/workbench.aspx#/

You will see a carousel as shown below –