How to add a Slider component to your SharePoint site

All BindTuning Themes come with Bootstrap components which you can leverage to build action on your SharePoint pages, improving user experience and engagement.

Those same Bootstrap components are only appliable for Classic SharePoint sites and/or pages and are static by nature, needing manual code adjustments in order to modify their correlative content. However, BindTuning offers the Build feature, a bundle of 19+ Web Parts, that constitute a highly functional and dynamic approach to content management, overcoming Bootstrap widgets limitations, as well as providing you with cross-platform compatibility.

Further information relating to the Build feature, as well as detailed instructions on how to start a trial can be found here.

BindTuning's Build feature provides a dynamic alternative to the Slider component seen on this article.

For SharePoint Collaboration sites

  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's website, log in and access BindTuning's Customizer Tool
      • In the top navigation, go to Widgets > Sliders;
      • Copy the HTML code that draws the slider.

    Detailed instructions on how to retrieve the widgets' code can be found here

  5. Go back to your SharePoint site, open the HTML Editor and paste the following snippet:
    <div class="MoveToSliderZone">
    <-- Paste SLIDER CODE here -->
    </div>
    This will move the slider to 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

  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 provided BindTuning page layouts (displayed in orange);

  5. Add a Content Editor web part to the slider zone of the page layout;
  6. In a new browser tab, go to BindTuning's website, log in and access BindTuning's Customizer Tool
      • In the top navigation, go to Widgets > Sliders;
      • Copy the HTML code that draws the slider.

    Detailed instructions on how to retrieve the widgets' code can be found here

  7. Go back to your SharePoint's site, edit the Content Editor web part and paste the retrieved code;
  8. Click Save;
  9. Check in and Publish your page.
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