This project is read-only.


The Bright Banner App featuring beautiful and easy to use slider with a nice multiple transitions. The thumbnails and buttons provide easy navigation of banners slides. This HTML banner built to be responsive and configurable through the app part properties.


  • Touch-friendly navigation for slider and thumbnails.
  • 16 Beautiful Transition Effects.
  • Able to load puffed up number of images, each with customizable description and hyperlink.
  • Show or hide slides by use active/inactive feature.
  • Responsive Size of slides and thumbnails can be dynamically changed.
  • Works with all SharePoint sites types, including office 365 public websites.

Add banner to SharePoint pages

There is two ways to add the Bright Banner to SharePoint page:

Add banner using App Part

  1. Go to Settings > Edit page.
  2. Click in the location on the page where you want to add the App Part.
  3. On the Insert tab of the ribbon, click App Part.
  4. Under Parts, click Bright Banner Part and then click Add.
  5. Save and Publish the page.

Adding the Bright Banner using app part functionality have some disadvantages:

  • You will not be able to change the part size
  • You will not be able to use Thumbnails & Theme Style features

Add banner using embed IFrame

By using embed IFrame you can get all Bright Banner features and you can add the banner to all sites and subsite without installing the app to these sub sites.

  1. Go to Bright Banner app default page.
  2. Click on Preview and Embed button.
  3. Change the banner settings to be fit with your site.
  4. Copy the embed code.
  5. Go to the page that you want to add the banner to it, then go to Settings > Edit page.
  6. Click in the location on the page where you want to add the embed IFrame.
  7. On the Insert tab of the ribbon, click Embed Code.
  8. Past the code to text editor, click insert button.
  9. Save and Publish the page

Note: sometime when use Embed Code in Office 365 public site page and after save the page, SharePoint delete some attributes from IFrame tag, use Content Editor Web-part rather than Embed Code.

Manage banner slides

  1. Go to Bright Banner app default page.
  2. To add, edit or remove slides, Click on Banner Slides List button.
  3. For each banner slide, you can fill the following fields:
    • URL: navigation link
    • Notes: description under the slide image
    • Image: slide image (recommendation size: 618w * 246h)
    • Active : Show or hide slide
  4. Back to app default page, then publish the banner content.

Upload slides images

Using Banner Images Library you can add more images to use with banner slides. Actually the Banner Images library just a document library to upload images. And Banner Slides List is a main list. So you can add any image path to this Banner Slides List (you can add images form host site, flicker or any image source)


Last edited Apr 9, 2014 at 5:30 PM by Muawiyah, version 8


tianaranjo May 7, 2016 at 3:51 PM 
I would like the images, videos to open in a new window - can somebody advise how to do that from the app?
Thank you.