Forum

Thread tagged as: Question

Bootstrap Carousel Template

Hi,

I have a content template called carousel.html:

<perch:before>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
</perch:before>

<perch:if exists="perch_item_first">
                <div class="carousel-item active" style="background-image: url('<perch:content id="carousel_image" type="image" width="1900" height="1080" label="Carousel image">')">
                    <div class="carousel-caption d-none d-md-block">
                        <h3 class="carousel"><perch:content id="carousel_title" type="text" label="Carousel title" required></h3>
                        <p class="carousel"><perch:content id="carousel_body" type="textarea" label="Carousel body" html="false"></p>
                    </div>
                </div>

 <perch:else>
                    <div class="carousel-item" style="background-image: url('<perch:content id="carousel_image" type="image" width="1900" height="1080" label="Carousel image">')">
                    <div class="carousel-caption d-none d-md-block">
                        <h3><perch:content id="carousel_title" type="text" label="Carousel title" required></h3>
                        <p class="carousel"><perch:content id="carousel_body" type="textarea" label="Carousel body" html="false"></p>
                    </div>
                </div>
     </div>                 
<perch:after>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
        </div>
    </perch:after>

When I add content to the region and display it on my homepage, images aren't displaying and the content items stack vs scrolling through. What would the proper way to do this be w/ Perch?

Thanks!

Trevor Brandt

Trevor Brandt 0 points

  • 2 years ago

Are you sure that your page is including css and js? Do a view source then click the urls in the source and see that both the css and js are properly linked.

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Hello Trevor,

When I add content to the region and display it on my homepage, images aren't displaying and the content items stack vs scrolling through. What would the proper way to do this be w/ Perch?

Perch does not handle your client side code. So the questions are:

  • (A) What is the markup (HTML) do you want to output?
  • (B) Have you tested this with a hard-coded example? Does it work?
  • (C) What does your Perch template output? Like Robert suggested, check your HTML with your browser's dev tools. Does it output the HTML as you expect it?

Hi Trevor

When I first used Perch with a bootstrap carousel. I followed this excellent post;

https://forum.grabaperch.com/forum/11-18-2015-bootstrap-carousel-template-for-perch