Answered

Carousel Banner Portal Landing Page

(0) Share

Report

Posted on by Community Power Pla...

Hi!

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

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?

All responses (3)

Answers (1)

Community Power Pla... on at

Like (0)

Report

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 Pla... on at

Like (0)

Report

Re: Carousel Banner Portal Landing Page

@hardikv Thanks! It looks like this:

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 1,510 on at

Like (2)

Report
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">  <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>  <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>  <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!