React Awesome Slider in SPFX

Introduction

As per official documentation, the react-awesome-slider is a 60 fps, extendable, highly customizable, and production-ready React Component that renders a media (image/video) gallery slider/carousel.

Open a command prompt. Create a directory for the SPFx solution.

md spfx-React-Slider

Navigate to the above-created directory.

cd spfx-React-Slider

Run the Yeoman SharePoint Generator to create the solution.

yo @microsoft/sharepoint

Solution Name

Hit Enter to have the default name (spfx-pnp-DropDown in this case) or type in any other name for your solution.

Selected choice - Hit Enter

Target for the component

Here, we can select the target environment where we are planning to deploy the client web part, i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).

Selected choice - SharePoint Online only (latest)

Place of files

We may choose to use the same folder or create a subfolder for our solution.

Selected choice - Same folder

Deployment option

Selecting Y will allow the app to be deployed instantly to all sites and be accessible everywhere.

Selected choice - N (install on each site explicitly)

Permissions to access web APIs

Choose if the components in the solution require permission to access web APIs that are unique and not shared with other components in the tenant.

Selected choice - N (solution contains unique permissions)

Type of client-side component to create

We can choose to create a client-side web part or an extension. Choose the web part option.

Selected choice - WebPart

Web part name

Hit Enter to select the default name or type in any other name.

Selected choice - SpfxReactAwesomeSlider

Web part description

Hit Enter to select the default description or type in any other value.

Framework to use

Select any JavaScript framework to develop the component. Available choices are - No JavaScript Framework, React, and Knockout.

Selected choice - React

The Yeoman generator will perform a scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.

Once the scaffolding process is completed, lock down the version of project dependencies by running the below command:

npm shrinkwrap

In the command prompt, type below command to open the solution in the code editor of your choice.

code .

NPM Packages Used,

On the command prompt, run below command.

npm i @pnp/logging @pnp/common @pnp/odata @pnp/sp --save

for Pollyfills

npm install --save @pnp/polyfill-ie11

for AwesomeSlider

npm install --save react-awesome-slider

in SpfxReactAwesomeSlider.tsx

import * as React from 'react';
import styles from './SpfxReactAwesomeSlider.module.scss';
import {sp} from '@pnp/sp';
import { ISpfxReactAwesomeSliderProps } from './ISpfxReactAwesomeSliderProps';
import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';
/*import CaptionedStyles from 'react-awesome-slider/src/components/captioned/styles.scss';*/
/*import 'react-awesome-slider/dist/custom-animations/scale-out-animation.css';
import 'react-awesome-slider/dist/custom-animations/cube-animation.css';
import 'react-awesome-slider/dist/custom-animations/fall-animation.css';
import 'react-awesome-slider/dist/custom-animations/fold-out-animation.css';
import 'react-awesome-slider/dist/custom-animations/open-animation.css';*/
import withAutoplay from 'react-awesome-slider/dist/autoplay';
const AutoplaySlider = withAutoplay(AwesomeSlider);
export interface Iurl {
//File: Array<urlproperties>;
File: urlproperties;
}
export interface urlproperties {
ServerRelativeUrl: string;
}
interface IPnpstate {
MYPnpFile:Iurl[];
}
export default class SpfxReactAwesomeSlider extends React.Component<ISpfxReactAwesomeSliderProps,IPnpstate> {
constructor(props: ISpfxReactAwesomeSliderProps, state: IPnpstate) {
super(props);
this.state = {
MYPnpFile: []
};
}
public componentDidMount(){
this._getpnpfile()
.then((response: Iurl[]) => {
console.log(response);
console.log(response[0].File.ServerRelativeUrl);
this.setState({ MYPnpFile: response });
});
}
private _getpnpfile() {
/* sp.web.lists.getByTitle("PnpLibrary")
.items.expand("Folder", "File").get()
.then((items: any[]): void => {
console.log(items);
}, (error: any): void => {
});*/
return sp.web.lists.getByTitle("PnpLibrary")
.items.expand("Folder", "File").get();
}
public render(): React.ReactElement<ISpfxReactAwesomeSliderProps> {
return (
<div className={ styles.spfxReactAwesomeSlider }>
<div className={ styles.container }>
{ this.state.MYPnpFile.length>0 && <Firstcarousel bindoutput={this.state.MYPnpFile} />}
<br></br>
{ this.state.MYPnpFile.length>0 && <Secondcarousel bindoutput={this.state.MYPnpFile} />}
</div>
</div>
);
}
}
/* ... */
const Firstcarousel = (props) => {
//var abc= (document.getElementById("textBox2") as HTMLInputElement).value ;
const Bindediv = props.bindoutput.map((Outfile,index) =>
<div key={index} data-src={Outfile.File.ServerRelativeUrl}>
</div>
);
const myfirstslider = (
<AwesomeSlider>
{Bindediv}
</AwesomeSlider>
);
return (
<div>
{myfirstslider}
</div>
);
};
const Secondcarousel = (myprops) => {
const Bindedcontent = myprops.bindoutput.map((Outfile,index) =>
<div key={index} data-src={Outfile.File.ServerRelativeUrl}>
</div>
);
const mysecondslider = (
<AutoplaySlider
play={true}
cancelOnInteraction={false} // should stop playing on user interaction
interval={2000}
>
{Bindedcontent}
</AutoplaySlider>
);
return (
<div>
{mysecondslider}
</div>
);
};
/* document.getElementById("Btn").addEventListener("click", function(){
(<HTMLInputElement><any>document.getElementById("textBox2")).value=(<HTMLInputElement><any>document.getElementById("textBox1")).value;
(<HTMLInputElement>document.getElementById(elementId)).value;
});
*/

Here, I am using the document library name "PnpLibrary"

The following code is for fetching images from the Document Library

sp.web.lists.getByTitle("PnpLibrary")
.items.expand("Folder", "File").get()
.then((items: any[]): void => {
console.log(items);
}, (error: any): void => {
});

For basic carousel, use the below CSS import

import 'react-awesome-slider/dist/styles.css';

For Scale-out animation carousel use the below CSS import

import 'react-awesome-slider/dist/custom-animations/scale-out-animation.css';

For Fold-out animation carousel use the below CSS import

import 'react-awesome-slider/dist/custom-animations/fold-out-animation.css';

For Cube animation carousel use the below CSS import

import 'react-awesome-slider/dist/custom-animations/cube-animation.css';

For Open animation carousel use the below CSS import

import 'react-awesome-slider/dist/custom-animations/open-animation.css';

For Fall animation carousel use the below CSS import

import 'react-awesome-slider/dist/custom-animations/fall-animation.css';

Note: use anyone on the CSS as per requirement to prevent Override,

AutoplaySlider is important from different package, use the following lines:

import withAutoplay from 'react-awesome-slider/dist/autoplay';
const AutoplaySlider = withAutoplay(AwesomeSlider);

Autoslider implemented by:

<AutoplaySlider
play={true}
cancelOnInteraction={false}
interval={3000}>
<div data-src="/image-0.jpg" />
<div data-src="/image-1.jpg" />
<div data-src="/image-2.jpg" />
<div data-src="/image-3.jpg" />
</AutoplaySlider>

Whereas other above mentioned sliders are implemented via:

<AwesomeSlider
<div data-src="/image-0.png" />
<div data-src="/image-1.png" />
<div data-src="/image-2.jpg" />
</AwesomeSlider>

Sample Output

Here, I stuck with the CSS module parameter as per the documentation. I used a different way to implement the different types sliders using CSS import methods. Captioned images and smooth lettering are pending from my side (since I receive some error, I hope to solve and update it very soon in my upcoming blogs).

For official documentation, visit https://caferati.me/demo/react-awesome-slider/images & https://github.com/rcaferati/react-awesome-slider

I hope this helps someone. If anyone solves the captioned images and smooth lettering, please comment in the comment section. Happy Coding! :)

5 Comments

Join the conversation! Your thoughts help the community grow.

yasmeen qasem5y ago
What if i want to make it an extension?
Sajith G H5y ago
Only Image is loading. <div key={index} data-src={Outfile.File.ServerRelativeUrl}>
Sajith G H5y ago
Captionedimagehoc is not working as expected.
Madhan Thurai6y ago
Use captionedimagehoc or smooth lettering hoc, all other procedures are same
Divesh Gupta6y ago
Hey! I would like to create a react slider which reads from a list. The list can have a Title & Description and I would like to read the two fields and read data to show. Users can slide thru for list items and read. Can you help with that?