web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id : v7oIMxQGdtJxQKN0Zwff7/
Power Platform Community / Forums / Power Pages - Power Apps Portals / Carousel Banner Portal...
Power Pages - Power Apps Portals
Answered

Carousel Banner Portal Landing Page

Like (0) ShareShare
ReportReport
Posted on 6 Oct 2021 14:25:31 by Community Power Pla...

Hi!

I have an requirement to establish a carousel banner on portal start page. Currently it looks like this:

newmay_0-1633530240460.png

I want to replace that "heroimage" with an carousel banner. In this Article its is explained, BUT it its created within the Home/Subtitle Content Snippet. I want it to be displayed over the whole Page as the heroimage. Can anyone advice me how to achieve this?

I have the same question (0)
  • Community Power Platform Member Profile Picture
    Community Power Pla... on 08 Oct 2021 at 09:07:30
    Re: Carousel Banner Portal Landing Page

    I solved it, I wrongly put the carousel banner within a container which did limit the size!

  • Community Power Platform Member Profile Picture
    Community Power Pla... on 08 Oct 2021 at 07:14:19
    Re: Carousel Banner Portal Landing Page

    @hardikv Thanks! It looks like this: 

    newmay_0-1633677224199.png

     

    My question is how we get the carousel banner to be full width to replace the other image in the background

     

  • Verified answer
    H V Profile Picture
    H V 1,510 on 07 Oct 2021 at 15:11:27
    Re: Carousel Banner Portal Landing Page

    Hi @Anonymous 

     

    • Please go to HOME Web Template.
    • Replace below code with your "heroimage" inside the HOME Web Template.
    <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="https://www.w3schools.com/bootstrap/la.jpg" alt="Chania">
 <div class="carousel-caption">
 <h3>Los Angeles</h3>
 <p>LA is always so much fun!</p>
 </div>
 </div>

 <div class="item">
 <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago">
 <div class="carousel-caption">
 <h3>Chicago</h3>
 <p>Thank you, Chicago!</p>
 </div>
 </div>

 <div class="item">
 <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York">
 <div class="carousel-caption">
 <h3>New York</h3>
 <p>We love the Big Apple!</p>
 </div>
 </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>

     

    --------------------------
    If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
Join experts in person to explore low code and AI agents at the Power Platform Community Conference sponsored by Microsoft
Responsible AI policies for the Community

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

MS.Ragavendar – Community Spotlight

We are honored to recognize Ragavendar Swaminatha Subramanian as our September…

Congratulations to the August Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
Jon Unzueta Profile Picture

Jon Unzueta 107 Super User 2025 Season 2

#2
KevinGador Profile Picture

KevinGador 34 Super User 2025 Season 2

#3
SwatiSTW Profile Picture

SwatiSTW 24 Super User 2025 Season 2

Last 30 days Overall leaderboard

Featured topics

Updates on Power Apps Portals - PLEASE READ

Product updates

Microsoft Power Platform Community release plans