SharePoint Framework Slide Swiper

Modern Swiper functionality as addition to every SharePoint intranet web part

More 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 part

I 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. Modern SharePoint carousel 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

The SPFx client side solution can easily be extended with more carousel like features because it is based on a popular feature rich JavaScript library called Swiper. Due to the nature of the Swiper javascript library, we can turn the SPFx we part into a carousel displaying news or pictures. I highly recommend going on the Swiper demo page and see all the available slide, carousel examples.

Solution packaging and bundle optimization considerations

This sample uses the Swiper JavaScript library thought the npm packages, but just for the purpose of the sample so it can quickly be run without additional setup. It is highly recommended to add the Swiper library as SPFx solution external reference to resize the solution bundle size and improve Site Page load times.

For event further optimization, a custom Swiper build can be created to keep the javascript file to minimum size. Documentation on how to do it can be found on the official Swiper API reference.

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
Marc Wenning | 12 Mar 2018

How easy would this slider be to get the data from a sharepoint list instead of the sample data? I am new to the SP framework, but this is great just need it to pull from a list.

Velin Georgiev | 13 Mar 2018

You should be able to easly implement a new ListService from the IListService that pulls data from SharePoint list. You can use the the PnP JS Core ( or to retrieve the data. More on work with lists here

m | 14 Jun 2018

Can u please send me the full code parts
for image slider

Velin Georgiev | 14 Jun 2018

Here is the github url:

Alpesh Patel | 04 Sep 2018

I package and deployed webpart in SharePoint online, Slider not working, Do i need to specify anything in config.json

Velin Georgiev | 04 Sep 2018

Seems to be working just fine for me. Please note the skipFeatureDeployment property is not set so you will have to add the app in order the Swiper web part to appear in the toolbox. Just go to https://<YOUR_TENANT><YOUR_SITE>/_layouts/15/addanapp.aspx then find the app and add it.

Manny | 07 Nov 2018

Doesn't work on classic sharepoint sites

Ishani Suchak | 23 Sep 2019

I am able to swipe on the slides in desktop mode. But when viewing in mobile version, the slides are not being swiped left and right. Is it a known issue?

Ishani Suchak | 23 Sep 2019

The slides are swipeable in the desktop view. But I am not able to swipe left and right on the slides when opened in mobile view. Is this a known issue?