Find a Slider PluginFirst and foremost, we need to find a Slider plugin so we can get smooth animations and a cool looking design. I chose SlidesJS because I’ve worked with it before and it has a few example designs included in its download. The design I chose was the “Images with captions” and looks like this: On important thing to take note of: this plugin requires jQuery. If you already have jQuery included in your site, you’ll need to omit certain tasks in this article. Download the plugin files here and extract the contents to your computer. We’ll need a few of those files later on. Note that the latest version available on the SlideJS website won't work with SharePoint 2016, but the one linked in this article will.
Create a Picture Library and Upload your Slide ImagesTo store our images, let’s use a good old Picture Library. Create one and name it “Slides”. Now, all you need to do is drag and drop the images you want to use for the slider in the Slides Picture Library. I used the images included in the plugin download found under “Slidesexamplesimages-with-captionsimg”. Also, take the time to add some descriptions in the metadata of each of the images. End result should be something like this:
Configure your Web Part’s Search Results QueryObviously, first thing to do is to add a Search Results Web Part on to whichever page you want. We now need to configure the Web Part’s search query in order for it to return only images from our Slider library. Edit the Web Part properties and select “Change query”. Select the following options:
- Select a query: Pictures (system)
- Restricted by app: Specify a URL (enter the URL of your Slides picture library)
- Item_SlideImage.html: Controls the look for individual search results items (in our case, each slide).
- Display Templates
- Control_SlideImage.html (Download them both here.)
Configure your Web Part’s Display TemplatesGo back to your previous Search Results Web Part and edit its properties. Under the “Display Templates” section, set the following configuration:
- Results Control Display Template: Image Slider
- Use a single template to display items
- Item Display Template: Slide Image
Show Off your New Image SliderThe end result should like exactly like the example on the SlidesJS web site. Here’s what mine looks like, with a caption (provided by the image description): Notice that I also tweaked the caption box to expand on hover, in order to mimic SharePoint’s own Web Parts: To make sure you haven’t missed anything, here’s a recap of the steps to take in order to get this up and running:
- Download the SlidesJS plugin files and extract them to your computer.
- Create a Picture Library called “Slides” and add the plugin’s slide images to it.
- Make sure your search has crawled your newly added content (in most cases, waiting 5-10 minutes will do the job)
- Add a Search Results Web Part to a page.
- Configure the Search Results Web Part search query to return slide images from your Picture Library.
- Upload the SlidesJS plugin files to the Style Library.
- Upload the display template files to “Master Page Gallery -> Display Templates -> Search”.
- Configure the Search Results Web Part control and item display templates.
If you haven't tried our popular SharePoint migration tool yet, what are you waiting for? ShareGate Desktop's UI isn't just simple and intuitive—it'S actually pleasant to use (really!).
Migrate to SharePoint or Office 365 quickly and easily, with best-in-class migration for all versions of SharePoint, unlimited data, and custom reporting. And effortlessly reorganize and restructure your content until it's exactly how you want it.
Save time and migrate with total peace of mind, then get back to business as usual. See for yourself with a free, full-featured 15-day trial.