Skip to main content

Carousel With ReactJS and SPFx in 10 Minutes

 


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
gulp build

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>


gulp serve


you can replace the image path with an actual one, and if you want the same and get an issue then make the base64 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 slider and fancy slider

please share your feedback to improve my blogs

Comments

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

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

Top20 - SharePoint Framework (SPFx) Interview Questions

1.  Which tool we can use to generate a SharePoint Framework (SPFx) solution? Developers can use  Yeoman to generate SharePoint Framework (SPFx) solution, it is a client-side scaffolding open-source tool to help in web-based development. 2. How developer can ensure that the solution deployed was immediately available to all site collections in SPFx?  To ensure the availability of the deployed solution on all the site collections developer has to configure  skipFeatureDeployment: true  in package-solution.json {     "solution" : {       "name" : "theultimateresources-deployment-client-side-solution" ,       "id" : "as3feca4-4j89-47f1-a0e2-78de8890e5hy" ,       "version" : "2.0.0.0" ,       "skipFeatureDeployment" : true     },     "paths" : {       "zippedPackage" : "solution/theultimateresources-deploy-true.sppkg"     }  }