Adding a slider – SharePoint 2013 and Office 365 v2013

Joao Ferreira

August 24, 2018 18:21

For SharePoint Collaboration sites

Note: This section applies to themes from version x.x.x.2

Go to your site and edit the desired page
In the ribbon select the Format Text tab
Click in the Edit Source option
In a new browser tab, go to bindtuning.com website and open the theme preview
- In the top navigation, go to Widgets > Sliders
- Copy the HTML code that draws the slider
Back to SharePoint, open the HTML Editor and copy the following code there:
```
<div class="MoveToSliderZone">
  <-- Paste SLIDER CODE here -->
</div>
```
This will move the slider in the correct place once you Save the page
Now, paste the slider code in the right place
Click OK and Save
The slider will be moved to the slider zone

Note: This article applies to themes from version x.x.x.6

Go to your site and edit the desired page
In the ribbon select the Page tab
Click in the Page Layout option
Select one of the orange page layouts included in your theme
Add a Content Editor web part to the slider zone of the page layout
In a new browser tab, go to bindtuning.com website and open the theme preview
- In the top navigation, go to Widgets > Sliders
- Copy the HTML code that draws the slider
Back to SharePoint, edit the Content Editor web part and paste the code there
Click Save
Check in and Publish your page, this way it will be visible for all your users

Have more questions? Submit a request

François Heurion September 19, 2013 10:25

It's good but it could be better by adding guidelines about html code

Permalink
Ana Sampaio January 28, 2014 09:39

HTML code sample.

Permalink
Jean Matuska February 04, 2014 17:25

I have Nivo slider working properly in Terra theme (trial version), but in the Flexo theme, the placeholder (SliderZone) is down with the hidden placeholders -- lines 610 - 612

<div class="ms-hide">

<asp:ContentPlaceHolder ID="TitleZone" runat="server" Visible="false">/asp:ContentPlaceHolder

<asp:ContentPlaceHolder id="SliderZone" runat="server" Visible="false">/asp:ContentPlaceHolder

Where should i put the new div to hold this placeholder if i want to use it -- Flexo theme?

Permalink
Darren Evans June 21, 2014 05:00

I have included the home slider zone theme spc. Where do the banner images sit? demoimages/slider-home-02.png"

Permalink
Ana Sampaio June 21, 2014 15:08

Darren, demoimages/slider-home-02.png sits at http://bindtuning.com/cms/sharepoint/office-365-v2013/theme/SPC/page/Home/demoimages/slider-home-02.png

Note that this is an image for demo purposes only.

Permalink
Catheryn Mancarti July 19, 2016 18:22

I am using the Flaat theme and was wondering if there is the best image size for responsive layout?

Permalink
Chris Barnes October 06, 2017 14:27

Hello, I'm using the Ignite theme and would like to set the interval for the slider. Where is the file that contains those settings?

Permalink