Installing PortalFront Tru Slider 3.0
What is provided
A zip file with the files needed
This video provides a good overview of the slider setup that will help guide you in the installation. It does not provide as much detail as this post.
Instructions
Copying the files
Create News Blog Site (Optional)
NOTE: If you don’t already have a list that you wish to use, proceed with creating a blog site per our recommendation here. If you have your own list you can customize the slider to use that list. You may skip to "Placing the slider in SharePoint"
Adding the columns to the blog List
| Summary | Multiple Lines of text (with Plain text) | Make this field mandatory. Set the maximum character size to 170 |
| Expires | Date and Time | |
| Image | 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.
Add Content to your Blog Posts
Make sure you add some content to the news list for the slider to show.
Placing the Slider in SharePoint
Note: It is preferred that you use a domain relative path. Here are some examples:
| Path of slider script | What to put in the content editor |
| https://company.com/Style Library/PortalFrontSlider/sliderScript.js | /Style Library/PortalFrontSlider/sliderScript.js |
| https://company.com/sites/siteA/Style Library/PortalFrontSlider/sliderScript.js | /sites/siteA/Style Library/PortalFrontSlider/sliderScript.js |
Warning: make sure you include the "/" at the beginning of the path.
/Style Library/PortalFrontSlider/sliderScript.js 
The slider will not show until the settings have been applied. See next section.
Editing the Settings
Editing the Settings
Location of Slider on the Page
The slider script will load the slider in the html DIV tag with the ID provided in the settings (as will be described below). Currently we already loaded the sliderscript.js file with the DIV tag.
You can locate this DIV tag by looking for this block in sliderscript.js
<div id="slider_1" class="slider">
<div class="flexslider">
<ul class="slides"></ul>
</div>
<ul class="slides-nav-tabs"></ul>
</div>
As you can see, the id of the slider here is slider_1. If yours is different it’s ok. As long as this ID matches the settings below.
Editing the Settings
Now you must edit the settings of the slider to reflect your environment. Open Sliderscript.js, find the settings portion and edit the variables.
The block you’re looking for will look like this:
var slider_1= new sliderBuilder($, ‘#slider_1’, {
slideshow: false,
sliderpath: sliderpath,
showArrows: true,
varListType: 1,
varListPath: "/News",
varListName: "Posts",
varInternalListName: "Posts",
varFieldExpiresOn: "Expires",
varFieldPublishOn: "PublishedDate",
varFieldOrderBy: "PublishedDate",
varFieldImage: "Image",
varFieldTitle: "Title",
varFieldSummary: "Summary",
varAlternateLinkField: ""
});
Parameter Your Must Change
| slider_1 | This should match the ID of the DIV tag where you want to place the slider |
| sliderpath | Modify the sliderpath variable at the top of sliderscript.js file. This is the location of the the scripts for the slider. |
| varListPath | Make sure the path starts with forward slash and doesn’t end with forward slash. This is the site where the blog site is.
Example 1: /News |
Parameters you May Want to Change
| varListType | Set to 1 if using a blog list and 2 if using a Pages list |
| varInternalListName | The internal name of the list you want to read data from. set to ‘posts’ for blogs |
| varFieldExpiresOn | The internal name of the field to use to expire the post and make it disappear. On that date the slider will no longer show the post. |
| varFieldPublishOn | The internal name of the field to use to automatically show the item in the slider. Before that date, the item will be hidden. |
| varFieldOrderBy | The internal name of the field to sort by. |
| varFieldImage | The internal name of the field rich text field to use that will hold the image. |
| varFieldTitle | The internal name of the field that contains the title of the news item. |
| varFieldSummary | The internal name of the field that contains the summary that shows below the title. |
| varAlternateLinkField | By default, clicking on the slide will take you to the slide post. However if you wish to have a slide go to a custom link (such as an external website or PDF) then specify the target destination in this field. Leave blank for default. If you do specify a field here and the a news item doesn’t have a overwriting link, the default behavior is to create a link to the default item or post. |
At this point the slider will show.
Separating the DIV from Sliderscript.js (Optional)
By default the slider will appear wherever you placed the sliderscript.js web part. However you have more control.
The slider is rendered automatically in the html div tag with id you set in the parameter. By default it is in sliderscript.js
However it best practice to put this script towards the end of the page for lazy loading and then inserting the <div id=’xyz’> anywhere you want the slider on the page. This is optional.
Many Sliders on the Same Page
You can place many sliders with different settings on the same page. This is done by adding a new DIV with a new ID to the page, then adding another slider settings section in sliderscript.js that points to that new ID
Placing Different Slider on Different Pages
You can place different sliders on different pages of your SharePoint site. This is done by cloning sliderscript.js file and pointing to that instead on the different pages. Each page will have its own script file.
Example.
Page 1 can use sliderpage1.js
Page 2 can use sliderpage2.js
When you clone the files simply keep them in the same folder. No need to copy the files to the other site or change its location. When you place the content editor webpart on the page, make sure you repeat the setup steps except this time point the content Editor to the new file instead of sliderscript.js.
Troubleshooting
If the slider does not load use this guide to identify the issue:
| Possible Issue | Verify that this is an issue | Resolution |
| The content editor web part is not referencing the correct path of sliderScript.js | Copy the value in the content editor web part. Navigate to the path: [domain]/[value in content editor] Example: Value = /Style Library/PortalFrontSlider/sliderScript.js Domain = https://companysite.sharepoint.com Navigate to : https://companysite.sharepoint.com/Style Library/PortalFrontSlider/sliderScript.js If navigating to this location results in no page found, then there is a problem with the path inside the Content Editor link. |
Navigate to library where the sliderscript.js file is located. Right click on the file and click "Copy link address" in Chrome or "Copy Shortcut" IE Copy the complete part right after the domain and paste it into the content editor content link field. |
| There is no content in the lists | Navigate to the list and check to see if there is content. | Add content to the list. |
| No Expires or Publish dates are set | Navigate to the list and the list item and make sure and check if those fields are populated. | Populate those fields and make sure that Publish date is less that today’s date and the expires field is greater than todays date. |
| The Sliderscript.js is not referencing the list properly | Open up sliderscript.js using SharePoint Designer preferably. Look at the |
Tip: try going into the browser developer tools and going into console to get any hints on any errors that the javascript may be generating. Share this with us to help you support it.
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).
How to modify the number of slides to show?
How to completely hide the thumbs?
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:
<link rel="stylesheet" href="/Style Library/PortalFrontSlider/slider-style.css" type="text/css" media="screen" />
How change the number of thumbs per row?
To do this:
.anythingControls .thumbNav li{
display:inline-block;
width:12%; /*k pecentage for each thumb*/
margin-right: 1.2%;
margin-bottom: 2%;
position: relative;
vertical-align: top;
}
/*change the 8n+8 to 6n+6 if you wish to wrap the thumbs after the 6th item. */
.anythingControls .thumbNav li:nth-child(8n+8){
margin-right: 0;
}