Fullscreen Image Slider in SPFx

This article demonstrates how to build a Fullscreen Image Slider in the SharePoint Framework (SPFx) web part using React.
This component allows users to browse images from a SharePoint document library with fullscreen support, smooth transitions, and easy navigation.

⚙️ Install Dependencies

Install the required libraries:

npm install @pnp/sp --save
npm install react-image-lightbox --save

🧩 Define the Component State

In your component file, define the interface for managing image data and state:

export interface ISpfxReactImagefullscreenState {
  photoIndex: number;
  isOpen: boolean;
  images: string[];
}

🪄 Implement the React Component

Here’s the complete implementation of the fullscreen image slider:

import * as React from 'react';
import styles from './SpfxReactImagefullscreen.module.scss';
import { ISpfxReactImagefullscreenProps } from './ISpfxReactImagefullscreenProps';
import { ISpfxReactImagefullscreenState } from './ISpfxReactImagefullscreenState';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/folders";
import "@pnp/sp/files";

export default class SpfxReactImagefullscreen extends React.Component<ISpfxReactImagefullscreenProps, ISpfxReactImagefullscreenState> {
  constructor(props: ISpfxReactImagefullscreenProps) {
    super(props);
    this.state = { photoIndex: 0, isOpen: false, images: [] };
  }

  public componentDidMount(): void {
    this._getAllImages();
  }

  private async _getAllImages(): Promise<void> {
    try {
      const folderUrl = `${this.props.context.pageContext.web.absoluteUrl}/SiteAssets`;
      const files = await sp.web.getFolderByServerRelativeUrl(folderUrl).files();
      const imageFiles = files.map((f: any) => f.ServerRelativeUrl);
      this.setState({ images: imageFiles });
    } catch (error) {
      console.error("Error loading images:", error);
    }
  }

  public render(): React.ReactElement<ISpfxReactImagefullscreenProps> {
    const { images, photoIndex, isOpen } = this.state;

    return (
      <div className={styles.spfxReactImagefullscreen}>
        <h3>Fullscreen Image Slider</h3>
        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
          {images.map((img, i) => (
            <img
              key={i}
              src={img}
              alt={`Image ${i}`}
              width="150"
              height="100"
              style={{ cursor: 'pointer', borderRadius: '6px' }}
              onClick={() => this.setState({ isOpen: true, photoIndex: i })}
            />
          ))}
        </div>

        {isOpen && (
          <Lightbox
            mainSrc={images[photoIndex]}
            nextSrc={images[(photoIndex + 1) % images.length]}
            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({ photoIndex: (photoIndex + images.length - 1) % images.length })
            }
            onMoveNextRequest={() =>
              this.setState({ photoIndex: (photoIndex + 1) % images.length })
            }
          />
        )}
      </div>
    );
  }
}

Configure the SharePoint Library

Ensure your site contains a document library (e.g. Site Assets) with images to display.
The component automatically fetches all files from that folder and renders them as thumbnails with fullscreen support.

🚀 Build and Deploy the Solution

Run the following commands to build and deploy your web part:

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

Upload the .sppkg file located in the sharepoint/solution folder to your App Catalog.
Deploy the package and add the web part to a modern SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:Fullscreen Image Slider in SPFx

GitHub

✅ Summary

This SPFx web part demonstrates how to create a fullscreen image slider using the React Image Lightbox library.
It provides a rich visual experience, allowing users to preview images in fullscreen with easy navigation controls and smooth transitions.