This a SharePoint Online modern web part of an image slider, which cycles images from a Document Libray as a slideshow. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
The supporting Document Library is deployed when the solution is added to the site.
On upgrade to 1.1.0.0, and you want to use the new Display Order Column, please add the column to the Default View.
The Office 365 CDN is used by default for downloading generic resource assets like the Office 365 client applications from a public origin.
This image slide supports the use of the Office 365 CDN by enabling the document library deployed with the soluiton by the following PowerShell commands.
Connect-SPOService https://<tenant>-admin.sharepoint.com
Set-SPOTenantCdnEnabled -CdnType Both -Enable $true
Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl */SliderImgs
Once enabled, just toggle the setting within the Web Part properties to utilize the Office 365 CDN to display your images.
| Solution | Author(s) |
|---|---|
| SPFX Image Slider | Shawn Fagan |
| Version | Date | Comments |
|---|---|---|
| 1.0.0.0 | January 25, 2021 | Initial release |
| 1.1.0.0 | February 13, 2021 | Added New Order By Options |
| 1.1.1.0 | February 19, 2021 | Corrected Pipeline Build Process |
- Ability to adjust the Image Size
- Small (Height: 300px)
- Medium (Height: 350px)
- Large (Height: 400px)
- X-Large (Height: 450px)
- Ability to adjust the Slide Speed
- Min Speed: 5 Seconds inbetween slides
- Max Speed: 30 Seconds inbetween slides
- Ability to select the Display Image Filter
- Display All Images within the Library
- Display Images with the Enabled Flag set to Yes
- Display Image based on the Publish Start & End fields
- Ability to select the field to use to order of images to be displayed
- Modified Date
- Created Date
- Display Order Field
- Ability to select the direction of the field to order of images to be displayed
- Ascending
- Descending
- Hide or Show the Image Caption
- Hide or Show the Slide Indicators
- Render Images using Office 365 Public CDN
- Select a Default Image to display if no image is found in the libary
- Multplie Layout Options
- Configurable Caption Settings
- Configurable Indicators Settings
- Use of Office 365 Private CDN
- SharePoint Online Theme integration
- Controlling required Document Library fields based on Image Filter
This web part is licensed under terms of Apache License V2.0. For further information see LICENSE file.
Please feel free to comment, feedback and contribute to this. Remember that this repository is maintained by a single person, so please be courteous and patient.
- Getting started with SharePoint Framework
- Building for Microsoft teams
- Use Microsoft Graph in your solution
- Publish SharePoint Framework applications to the Marketplace
- Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent