In my previous article I provided the steps to change the out of the box Portal Banner. But, what if you want to take this a step further and add a carousel banner to the Portal ? In this article I am going show you how to get this done in a few steps.

What is a Carousel Banner ? You can read about it in this URL 🙂

Pre-Requisites

  1. Images required for the Carousel banner (In this example I am using 3 images)
  2. User Account to the Portal with a user that has the portal “Administrator” role

Step 1: Login to the Portal with a user that has the portal “Administrator” role

Step 2: Upload the desired image files by seleing “Child File” menu option. In this example I am using 3 image files .

Step 3: Provide details for the image file . Make a note of the “Name” you provide for each image file . This is important as you will need  this name to update the Script.

Step 4: Copy the below script to a Notepad and update the  image source tag img src=”/la.jpg” and the alternate text for the image alt=”Los Angeles” as per the images and the files names you have chosen.

 "<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="/la.jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="/chi.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="/ny.jpg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>"

Step 5: Navigate back to the Portal and click edit on the portal component where you want to place the banner. In this example I am placing the banner on the “Home/Subtitle” component.

Step 6:  Click on the “Source” button on the Edit Page

Step 7: Copy and Paste the updated code and click Ok on the Source page and the Edit page  to save changes.

Step 8: Navigate back the Portal and Refresh the page to view the changes .

Note: All the uploaded images can be found in the “Web Files” Menu as an attachment. If you require to change the images you can simply replace the attachment file