PortalFront SharePoint Slider Preview – Installation

The instructions provided are for the Preview version of the PortalFront SharePoint Slider. For the full version visit SharePoint Slider.

What is provided

A zip file with the files needed


[Important Note] – If your site collection is  not located at the root  of your domain, then please follow the additional instructions below “My SharePoint Site URL has “/sites/” in it” to make sure the slider shows up.

Usually you can tell if your site is not at the root of your domain when you see “/sites/” in your URL.

Copying the files

  1. Go to your root site collection where you wish to place the slider code base.
  2. Go to Site Actions -> View All Site Content -> Style Library
  3. Copy the folder "PortalFrontSlider_Preview" found in the zip into the "Style Library" folder

You may verify that the following files have been copied:

  • slider-style.css
  • jquery.anythingslider.min.js
  • jquery.SPServices-0.7.0.min.js
  • jquery-1.7.1.min.js
  • sliderScript.js
  • compactstyle.css
  • sample-slider-image.gif

Create News Blog Site

This is where the news will be stored.

  1. Go to the root site collection where you wish to house the content of the slider.
  2. Go to Site Actions -> New Site
  3. Find and select the "Blog" template
  4. Provide a name for the site such "News"
  5. Provide "news" as the URL

Adding the columns to the blog List

  1. Navigate to the Blog Site you created in the previous step.
  2. Go to Site Actions -> View All Site Content
  3. Click on Posts list
  4. Add the following columns to the list


Multiple Lines of text (with Plain text)

Make this field mandatory.

Set the maximum character size to 170


Date and Time



Multiple Lines of text with Enhanced Rich text


Ensure that the columns match this screenshot

    Add a few test items to the blog and include some pictures. Make sure the Published Date is set in the future of the items so that they appear on the slider once it is placed on the page.

Placing the Slider in SharePoint

  1. Navigate to the page where you wish to place the news slider web part
  2. Add a Content Editor Webpart by clicking on Site Actions -> Edit Page
  3. Click on "Insert Tab" in the Ribbon
  4. Click on "Web Part"
  5. Under Categories, click on "Media and Content"
  6. Under Web Parts, click on "Content Editor"
  7. Click "Add"
  8. Once added, Edit the web part:
  9. On the Content Editor Properties that appears on the right hand side of the page (you may have to scroll), type in the location of the sliderScript.js you uploaded earlier to the Styles Library folder. It should looking something like this:

/Style Library/PortalFrontSlider_Preview/sliderScript.js

  1. Click ok and you save the page.
  2. The slider should show.

If the slider does not show, make sure you have items in the blog posts of the news site. Also make sure that the location of the sliderScript.js is correct. You may verify this location by navigating to http://[yoursite]/Style Library/PortalFrontSlider_Preview/sliderScript.js (if nothing loads or asks for download that is most likely the issue and you will need to find the correct path to the file.) For help or assistance reach us at support@portalfront.com      


My SharePoint Site URL has “/sites/” in it

Only follow those instructions if your SharePoint site has “/sites/” in the URL

1. Open sliderscript.js

2. Do a search an replace of "/style library/" with "/sites/sitename/style library/"

Inline image 2

3. Replace line 50 as below from "/News/" to "/sites/sitename/News/"

Inline image 1


Modifying settings

How to modify the duration of each slide?

Edit the provided sliderScript.js file as follows: (you may use notepad to edit it then upload it or you may use SharePoint designer to edit it directly).

  1. Locate the Slider Settings section
  2. Locate the intDelay =6 line.
  3. Change the number 6 to the new number you need. The units are in seconds.

How to modify the number of slides to show?

  1. Edit sliderScript.js
  2. Locate the Slider Settings section
  3. Locate the intMaximumItems = 8 line.
  4. Change the number 8 to the new number you need.

This bottom section is only for the premium version

How to completely hide the thumbs?

  1. Edit sliderScript.js
  2. Locate the Slider Settings section
  3. Locate the boolThumbs = true line.
  4. Change true to false

How to change the format of the slider?

There are two formats for the slider to choose from.

Format 1 is an expanded format that shows the the thumbs and large images and titles.

Format 2 (compact) – that shows small image thumbs for each slide.

To change the view:

  1. Edit sliderScript.js
  2. Locate the DISPLAY STYLE section
  3. Change the red text in the line below to either slider-style.css or compactstyle.css

<link rel="stylesheet" href="/Style Library/PortalFrontSlider_Preview/slider-style.css" type="text/css" media="screen" />

How change the number of thumbs per row?