Skip to main content

Step-by-step guide to create a carousel with ReactJS and SharePoint List

Carousel is the beautiful control for any kind of web or app solution, it provides a rich user experience by spreading information in the form of media or images, in this blog I am going to tell you how we can implement and deploy the carousel with the help of React JS in SharePoint modern site, with the help of SPFx WebParts.

You only need to follow very basic steps to do it.

Don't be afraid this is the right blog to implement a carousel with ReactJS and interact with SharePoint List.

Building Carousel which interacts with dynamic content is a modern approach, that is easy as we make a cupcake. you need to follow a few steps and you get it

If you are new and learn from the basics please review the below URL and understand the step by step implementation 

if you are familiar with the basic ReactJS and all required libraries, this is the right place for that


we implementing a carousel with ReactJS and  office 365/SharePoint List with the help of Bootstrap and TypeScript in SPFX


  • Create a SharePoint List
  • Install all the dependencies
  • Copy the instruction and Code
  • build a solution
  • run the solution on the workbench mode

Create a SharePoint List

if you experience developer so it is nothing for you, but for the new one, it is easy just drink a coconut 

in the above image, you can see the list I created and in the below image you can see the column which I used for the list
  • Title: Single Line of text
  • Description: Multiline of Text
  • RedirectURL: Hyperlink 
  • ImageURL: Hyperlink

Install all the Dependencies 

first of all, you need to run the yo command to install the framework below command after the execution of this please select ReactJS as a framework   

yo @microsoft/sharepoint

after success, need to run some more commands step by step

npm i --save react-bootstrap
npm install bootstrap@4 --save
npm install @types/bootstrap@4 --save

npm install jquery --save
npm install @types/jquery --save
gulp build

Copy the instruction and Code

Once all is done, open the TSX file from the solution and copy the below text and paste it into the import section

import  Carousel  from 'react-bootstrap/Carousel';
import "bootstrap/dist/css/bootstrap.css";
import * as jQuery from 'jquery';
import { SPHttpClientSPHttpClientResponse } from '@microsoft/sp-http';

Need to write an interface for the list's column so that, when we trigger the API all the mapping should be done automatically 

export interface ISliderCarouselListItem{
    Description : string;
    ImageURL: [];  

After that, we need to implement a collection of this list item

export interface ISliderCarouselDemoState{
   value : ISliderCarouselListItem[];

Just after we add a constructor and initiate default states of collection

    this.state = {
      value: []

Implement an API that interacts with the SharePoint List, and retrieve the data collection

 private getCarouselListContent = () => {   
   try {
      let requestUrl = `${this.props.absoluteURL}/_api/web/Lists/
      .then((responseSPHttpClientResponse) : Promise<ISliderCarouselDemoState=>{
          return response.json();
      }).then((item=> {      
        if (item!=null){ 
                value: item.value             
       } catch (error) {    
      console.log('error in service 'error);  

Once this API is done, need to call it with ReactJS event, in our case, we call it with component Did Mount Event

componentDidMount = () => {       

Now its time to Bang-Bang, copy the below content in the render method

public render(): React.ReactElement<ISliderCarouselDemoProps> {
let collection = this.state.value;
console.log('Collection 'collection);
return (
<div className={ styles.sliderCarouselDemo }>
{collection.length0 &&>
      <a href={data.RedirectURL['Url']}>
        className="d-block w-100"
        alt="First slide"

The below image shows you how the final code looks like

Now, its time to open an interface ts file 

export interface ISliderCarouselDemoProps {
  listName : string;
  absoluteURL : any;
  spHttpClient : any;

see below image for reference

after that, we need one more change for the Dynamically set List Name from the property panel
Need to open, Web part.ts, please refer below images

all is done, need to build a solution and deploy it on your site collection app catalogue

gulp build
gulp serve
gulp  bundle --ship
gulp  package-solution --ship


by stepping the above steps we can get a beautiful carousel with rich features

I am hoping this makes your task essay, kindly share your comments, so that, I can improve my blogs.
Thank you :)


  1. Bro if possible , please share the code link ,I am not able to fetch data from list , collection count is 0, there is no data to show .


Post a Comment

Popular posts from this blog

Interview Questions of SPFx SharePoint

What is SPFx? The SharePoint Framework (SPFx) is a web part model that provides full support for client-side SharePoint development, it is easy to integrate with SharePoint data, and extend Microsoft Teams. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready. Scenario Based asking Scenario 1: Scenario: Your team is developing a SharePoint Framework (SPFx) web part that needs to retrieve data from an external API and display it on a SharePoint site. The API requires authentication using OAuth 2.0. The web part should also allow users to refresh the data manually. Question 1: How would you approach implementing this functionality in an SPFx web

Power Apps modern driven app Interview Question and answer

Question 1: What is a Power Apps modern driven app? Answer: A Power Apps modern driven app is a low-code/no-code application development platform provided by Microsoft. It allows users to create custom applications that can run on various devices and platforms without the need for extensive coding. These apps can be built using a visual interface and can integrate with different data sources. Question 2: What are the key components of a Power Apps modern driven app? Answer: The key components of a Power Apps modern driven app are: Screens : Screens serve as the user interface for the app and can include multiple layouts, controls, and data visualizations. Data sources : These are the various repositories where the app can retrieve and store data, such as SharePoint lists, SQL databases, Excel files, etc. Connectors : Connectors enable integration with external services and systems, allowing data to be fetched or updated. Formulas : Power Apps uses a formula language called Power Apps

Interview Question of Advanced SharePoint SPFx

1. What is WebPack? A module bundling system built on top of Node. js framework is known as a WebPack. It is capable to handle the combination and minification of JavaScript and CSS files, also other files such as images by using plugins. WebPack is the recommended way of bundling the files in JS framework and .Net frameworks. In the SPFx it is used with React Js. 2. What is PowerShell.? PowerShell is a platform introduced by Microsoft to perform cross-platform task automation and configuration management framework, it is made up of a command-line shell, a scripting language. it can be run on Windows, Linux, and macOS. 3. What is bundling and Minification? The terms bundling and minification are the processes of code compressing, which is used to improve the load and request time, It is used in modern JavaScript frameworks and .Net frameworks. It improves the load time by reducing the number of requests to the s