SharePoint Frontier – Slider / Carousel Web Part for SharePoint 2013 is built upon Nivo Slider, which is a very popular jQuery plugin for Image carousel with overlay text and plenty of configuration options. This Web Part supports all the options exposed by Nivo Slider.
The below are some of the special features of this web part.
1. Option to limit the number of images to be displayed based on descending order of created dated (Date on which the image is uploaded into SharePoint Library)
2. Option to Show / Hide the navigation bar at the bottom of Image container
3. Option to Include or exclude jQuery library while rendering the web part
4. Option to control the width of Image
5. Option to refer script and content from custom SharePoint Library inside the current site or root site.
6. Custom fields to provide over lay text, Navigation Link, transition effect and selection of theme.
7. Option to provide all configuration settings supported by Nivo Slider as comma separated parameter to Web Part
Implementation
Now let’s see how this web part is implemented. This solution contains a code web part, a module, a feature and a feature receiver. Now we shall see the role played by these objects in this solution.
The web part is a code based web part and it creates the entire script, style reference and content as string and writes to html writer stream based on configuration settings by overwriting the render method.
The module contains theme files, scripts and style sheets files and an element file which enables provisioning of these files into Style Library list.
This feature is a site collection level feature and it deploys the web part and module. It also contains a feature receiver which creates an Image library by the name “SFS Carousel Content” with some additional custom columns (highlighted in the below image).
Configuration Options
Before having a look into configuration options available in web part let’s have a look into the options available for data entry.
Although this Image library contains additional custom columns (highlighted in previous image), Image is the only required filed for this Web Part and this web part can work even if other columns are not available. So instead of using this custom Image library, an ordinary OTB Image Library can also be used as Source List. The additional columns available in “SFS Carousel Content” are to provide some advanced features like setting the transition effect for individual image, enabling navigation for displayed image, configuring navigation mode and rendering overlay text on image. The content provide in description column is displayed as over lay text. Data from key word, Title, Date Picture Taken columns are not used anywhere in this web part. Once the WSP is deployed and feature activated add as many items you require and edit a page and add the web part “SFS.Ashok.NivoSlider – Nivo” displayed under the category “SharePoint Frontier” into a web part zone.
Configuring Web Part
The below is the screen shot of web part configuration screen. Except for the Nivo slider options (the last item) all the other options are self-explanatory. This parameter is not mandatory and it can be blank. But this parameter provides you full control over the behavior of Nivo slider and it accepts all the configuration options available for Nivo Slider. Refer this link to know more about the options available http://nivo.dev7studios.com/support/jquery-plugin-usage/
The value for this parameter has to be provided as comma separated items. These options will be integrated into the generated code. An example would be like
manualAdvance: false, startSlide: 0,pauseTime: 3000
Converting into a Sand Boxed solution
Converting this web part into Sand Boxed web part would be very easy. Detach the feature receiver and assign the Image Library name to an existing Image Library and create the columns manually if you require the over lay, navigation options etc…
Leave a comment