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!