This SPFx React web part sample demonstrates mobile touch slide swiper. By default the web part is responsive, has cross device and browser touch support and uses paging, but additional features like navigation, auto play, loop of the slides and more can be enabled from the web part properties panel. The react slide swiper web part can be used as carousel as well. The slides or cards template can easily be customized.
Modern Swiper functionality as addition to every SharePoint intranet web partMore and more organizations demand for responsive mobile friendly intranets. With the help of SharePoint modern pages, SharePoint Framework we can build nice swipe, touch based webparts and improve the user experience when a site is used from tablet or smart phone.
React Slide Swiper sample is an example of touch friendly responsive web partI recently submitted that sample to the SharePoint Patterns and Practices Github repo. The SPFx web part sample can be summarized in one image bellow, but there are more features implemented and can be controlled from the properties of the web part.
Here is a short video tutorial how the SPFx web part can be used and shot walk-through the code
React Slide Swiper with built-in properties so the slider can be configured
The sample comes with SPFx properties for controlling the slides on the page, autoplay, paging, navigation, different cursor or replay of the slides if all are displayed. More features can be added to the SPFx property pane since the Swiper has even more configuration options.
SharePoint responsive carousel web part
Solution packaging and bundle optimization considerations
Another advantage is that the Swiper library does not have dependencies on other heavy libraries like JQuery.
Using the SharePoint Framework allow us to use modern open source libraries like Swiper and quickly build solution for our customer without the need to reinvent the wheel. Take advantage of that now :)SharePoint Framework React Slide Swiper web part