Carousel With ReactJS and SPFx in 10 Minutes

Implement a Carousel with React JS in SPFx

Author: Vishal Thakur

If you want to implement a carousel like the one shown below, you're in the right place. In this blog, I'll show you how to create a carousel using Bootstrap and React JS in SharePoint/Office 365 SPFx.

Introduction

Implementing a carousel in React JS is not a big deal if you follow this guide. React JS has become very popular, and there are many plugins available to fulfill client requirements. In this blog, I'll walk you through the process of creating a carousel using Bootstrap and React JS in SharePoint/Office 365 SPFx.

Steps to Follow

It's as simple as making coffee. You just need to execute a few npm commands. You can run these commands directly using Node.js Command Prompt or Visual Studio Code IDE by opening the terminal from the top menu.

• Create a folder in your development directory and open it in Visual Studio Code.
• Copy and paste the following command into the terminal window:

yo @microsoft/sharepoint

After running the command, follow the prompts and select React JS as the framework. Once the package is created, run the following commands to install the required dependencies:

npm i --save react-bootstrap

This will install the package combination of Bootstrap and React JS.

npm install bootstrap@4 --save

npm install @types/bootstrap@4 --save

The above commands resolve some CSS-related issues that I faced. After running these commands, the component should work fine.

npm install jquery --save

npm install @types/jquery --save

These commands resolve the dependency of jQuery. Now, everything is set up, and it's time for the final code.

Code

Open your TSX file and add the following lines at the top of the import section:

import Carousel from 'react-bootstrap/Carousel';

import "bootstrap/dist/css/bootstrap.css";

import * as jQuery from 'jquery';

Now, copy the following code and paste it into your render section:

<Carousel>

  <Carousel.Item>

    <img className="d-block w-100" src="[Your Image URL]" alt="First slide" />

    <Carousel.Caption>

      <h3>First slide label</h3>

      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>

    </Carousel.Caption>

  </Carousel.Item>

  <Carousel.Item>

    <img className="d-block w-100" src="[Your Image URL]" alt="Second slide" />

    <Carousel.Caption>

      <h3>Second slide label</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    </Carousel.Caption>

  </Carousel.Item>

  <Carousel.Item>

    <img className="d-block w-100" src="[Your Image URL]" alt="Third slide" />

    <Carousel.Caption>

      <h3>Third slide label</h3>

      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>

    </Carousel.Caption>

  </Carousel.Item>

</Carousel>

You can replace the image paths with actual URLs. If you encounter issues, ensure the binary code is in a single line.

Conclusion

Finally, your carousel should look like the image below. I hope this guide helps you implement a carousel in your SPFx project. In my next blog, I'll show you how to implement dynamic and fancy sliders.

Please share your feedback to help me improve my blogs. For more tutorials, visit my blog: The Ultimate Resources.