Adding a slider – SharePoint 2013 and Office 365 v2013

Avatar
Joao Ferreira
Follow

For SharePoint Collaboration sites

Note: This section applies to themes from version x.x.x.2
  1. Go to your site and edit the desired page
  2. In the ribbon select the Format Text tab
  3. Click in the Edit Source option

    Capture.PNG

  4. 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
  5. 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
  6. Now, paste the slider code in the right place
  7. Click OK and Save
  8. The slider will be moved to the slider zone

For SharePoint Publishing sites

Note: This article applies to themes from version x.x.x.6
  1. Go to your site and edit the desired page
  2. In the ribbon select the Page tab
  3. Click in the Page Layout option
  4. Select one of the orange page layouts included in your theme

  5. Add a Content Editor web part to the slider zone of the page layout
  6. 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
  7. Back to SharePoint, edit the Content Editor web part and paste the code there
  8. Click Save
  9. Check in and Publish your page, this way it will be visible for all your users
Have more questions? Submit a request

Comments

  • Avatar
    François Heurion

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

  • Avatar
    Ana Sampaio

    HTML code sample.

  • Avatar
    Jean Matuska

    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?

  • Avatar
    Darren Evans

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

  • Avatar
    Ana Sampaio

    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.

  • Avatar
    Catheryn Mancarti

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

  • Avatar
    Chris Barnes

    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?

Powered by Zendesk