Skip to main content

Implement carousel with React JS in SPFx




If you want to implement a carousel-like this, then you are in the right place

Need to run some queries and you go

Introduction

Implement a carousel in React JS is not a big deal if you read this blog at the end. 
now a day React JS is becoming very popular and lots of plugins are available to full fill the client's requirements.

In this blog, I will show you how to implement a carousel using Bootstrap and  React JS in SharePoint/Office 365 SPFx 

Steps to Follow

It is just simple as make a coffee only the things need to execute a few npm commands.

you can run it directly by Node Js Command Prompt or Visual Studio Code IDE by opening Terminal from the top menus

  • Create a folder in your development folder in your systems drive and point it in Visual Studio Code by Opening in a new folder
  • Then copy and paste the below command into the terminal window
  yo @microsoft/sharepoint


after that, you need to follow steps as Yo Command returns and select React JS as the framework
once the package is created, then need to run some more commands 

 npm i --save react-bootstrap

This will instal package combination with the bootstrap and React JS

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

above commands are used to resolve some CSS related issue which I face and after that component working fine

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

above commands resolve the dependency of JQuery.
all thing is done now, now the time for the final code 



Code

open your TSX file and above at the import section copy and paste these lines

import  Carousel  from 'react-bootstrap/Carousel';
import "bootstrap/dist/css/bootstrap.css";
import * as jQuery from 'jquery';


Now it' time for heroes entry, copy the below code and paste it into your render section 

<Carousel>
    <Carousel.Item>
      <img
        className="d-block w-100"
          src="data:image/svg+xml;charset=UTF-8,%3Csvg%20
          width%3D%22800%22
          %20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2
          Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22
          %20preserveAspectRatio%3D%22none%22%3E%3Cdefs
          %3E%3Cstyle%20type%3D%
          22text%2Fcss%22%3E%23holder_1780bf093a0%20text%
          20%7B%20fill%3A%23ffffff%
          3Bfont-weight%3Anormal%3Bfont-family%3A-apple-system%
          2CBlinkMacSystemFont%2C%26quot%3BSegoe
          %20UI%26quot%3B%2CRoboto%2C%26quot%3BHelvetica%20Neue
          %26quot%3B%2CArial%2C%26quot%3BNoto
          %20Sans%26quot%3B%2C%26quot%3BLiberation%20Sans%26quot
          %3B%2Csans-serif%2C%26quot%3BApple
          %20Color%20Emoji%26quot%3B%2C%26quot%3BSegoe%20UI
          %20Emoji%26quot%3B%2C%26quot
          %3BSegoe%20UI%20Symbol%26quot%3B%2C%26quot%3BNoto
          %20Color%20Emoji%26quot%3B%2C%20monospace
          %3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%
          2Fdefs%3E%3Cg%20id%3D%22holder_1780bf093a0%22%3E
          %3Crect%20width%3D%22800%22%20height%3D%22400
          %22%20fill%3D%22%23373940%22%3E%3C%2Frect%3E%3Cg
          %3E%3Ctext%20x%3D%22289.71875%22%20y%3D%22221.3
          %22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
        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="data:image/svg+xml;charset=UTF-8,%3Csvg%20width
          %3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http
          %3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200
          %20800%20400%22%20preserveAspectRatio%3D%22none%
          22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%
          23holder_1780bf093a8%20text%20%7B%20fill%3A%23ffffff
          %3Bfont-weight%3Anormal%3Bfont-family%3A-apple-system
          %2CBlinkMacSystemFont%2C%26quot%3BSegoe%20UI%26quot
          %3B%2CRoboto%2C%26quot%3BHelvetica%20Neue%26quot%3B%
          2CArial%2C%26quot%3BNoto%20Sans%26quot%3B%2C%26quot
          %3BLiberation%20Sans%26quot%3B%2Csans-serif%2C%26quot%
          3BApple%20Color%20Emoji%26quot%3B%2C%26quot%
          3BSegoe%20UI%20Emoji%26quot%3B%2C%26quot%3BSegoe%20UI%
          20Symbol%26quot%3B%2C%26quot%3BNoto%20Color%20Emoji%2
          6quot%3B%2C%20monospace
          %3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3
          E%3Cg%20id%3D%22holder_1780bf093a8%22%3E%3Crect%20widt
          h%3D%22800%22%20height%
          3D%22400%22%20fill%3D%22%23282c34%22%3E%3C%2Frect%3E%3
          Cg%3E%3Ctext%20x%3D%22251.96875%22%20y%3D%22221.3
          %22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2F
          g%3E%3C%2Fsvg%3E"
        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="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D
          %22800%22%20height%3D%22400%22%20xmlns%3D%22http
          %3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220
          %200%20800%20400%22%20preserveAspectRatio%3D%
          22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fc
          ss%22%3E%23holder_1780bf093a9%20text%20%7B%20
          fill%3A%23ffffff%3Bfont-weight%3Anormal%3Bfont-fa
          mily%3A-apple-system%2CBlinkMacSystemFont%2C%
          26quot%3BSegoe%20UI%26quot%3B%2CRoboto%2C%26quot%
          3BHelvetica%20Neue%26quot%3B%2CArial%2C%26quot%
          3BNoto%20Sans%26quot%3B%2C%26quot%3BLiberation
          %20Sans%26quot%3B%2Csans-serif%2C%26quot%3BApple%
          20Color%20Emoji%26quot%3B%2C%26quot%3BSegoe%20UI
          %20Emoji%26quot%3B%2C%26quot%3BSegoe%20UI%20Symbol%2
          6quot%3B%2C%26quot%3BNoto%20Color%20Emoji%26quot
          %3B%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C
          %2Fdefs%3E%3Cg%20id%3D%22holder_1780bf093a9%22%
          3E%3Crect%20width%3D%22800%22%20height%3D%22400
          %22%20fill%3D%22%2320232a
          %22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22278.3203125%22%20y%3D
          %22221.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
        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 path with an actual one, and if you want the same and get an issue then make the binary code in a single line

Conclusion

finally, it is done and looks like the below image,




The above code should look like this, hope it will help you.

in my next blog I will show you how to implement dynamic sliders and fancy sliders

please share your feedback to improve my blogs

Labels:

Comments

  1. komalAugust 21, 2022 at 9:29 AM

    Hi,
    I am getting these errors
    [21:58:18] Error - [tsc] node_modules/@restart/ui/esm/types.d.ts(5,1): error TS1128: Declaration or statement expected.
    [21:58:18] Error - [tsc] node_modules/@restart/ui/esm/types.d.ts(5,13): error TS1005: ';' expected.

    ReplyDelete

Post a Comment

Popular posts from this blog

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 ...
Post a Comment
Read more

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...
7 comments
Read more

SPFX Interview question for 2023

SPFx Interview Questions for 2023 Question 1: What is SharePoint Framework (SPFx)? Answer: SharePoint Framework (SPFx) is a development model introduced by Microsoft for creating client-side web parts and extensions for SharePoint Online and SharePoint 2019. It is based on modern web technologies like JavaScript, TypeScript, and React, providing a rich and responsive user experience. Question 2: What are the key advantages of using SPFx for SharePoint development? Answer: SPFx offers several advantages, such as: Responsive and mobile-ready web parts and extensions. Seamless integration with SharePoint data and services. Support for modern web development practices and tools. Easy deployment and hosting options. Enhanced security and isolation through the SharePoint app model. Question 3: Can you explain the structure of an SPFx solution? Answer: An SPFx solution consists of the following key components: Web Parts: These are the building blocks of SPFx solutions, representing the vi...
Post a Comment
Read more