An image slider? Doesn’t SharePoint 2013 have this “out-of-the-box” by now? Well, the answer is yes, if you have access to the Content Search Web Part, which is available only in SharePoint 2013 Enterprise on premise. Most likely, this will single out most users, especially because of the lack of support on the cloud.
Once again, it’s my job to bring out the best in SharePoint and show you how to make your own image slider! I’ve done it before using the Content Query Web Part (http://tinyurl.com/87c25zq), now let’s see how to do this in SharePoint 2013 using the Search Results Web Part.
Find a Slider Plugin
First 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 Images
To 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 Query
Obviously, 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)
Notice the search result preview displays the 6 slide images previously uploaded. If your content doesn’t appear in the preview, maybe your search hasn’t yet crawled your new content. Give it a few minutes and try it again.
Save the configuration and close the edit panel of your Web Part. The search results should now look something like this:
Now, time to incorporate the SlidesJS plugin into the search results using a display template.
Upload the Slider Plugin Files
Navigate to the Style Library and create the following structure, using the files provided here:
For reference, here is the result we are aiming for:
Create your own Display Template
In order the use SlidesJS plugin, I’ve created a custom display template consisting of two files:
- Item_SlideImage.html: Controls the look for individual search results items (in our case, each slide).
I’ve spared you the trouble of making the actual display templates and provide them in this article. Navigate to the Master page gallery and add the following files in their respective location:
Master Page Gallery
- Display Templates
- Control_SlideImage.html (Download them both here.)
Warning # 1!
Warning # 2!
If you already have jQuery referenced in your site, remove line 19 of the Control_SlideImage.html file.
Configure your Web Part’s Display Templates
Go 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
For reference, here’s a screenshot of the required configuration:
Save the configuration and close the edit panel of your Web Part. Call your friends and family because you’re now ready to use your image slider SharePoint 2013!
Show Off your New Image Slider
The 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.