Wordpress Post Carousel - 我如何自动填充？

I am creating a site where I want the latest posts to carousel along the top of the page underneath the navigation bar. I'm using Bootstrap for the theming, Owl-carousel for the carousel itself and Wordpress for the posts etc. I'm still very much a newbie when it comes to using Wordpress in this way and would appreciate some help!

I've tried populating the carousel using <?php if (have_posts()) : while (have_posts()) : the_post(); ?> and I presume the reason It's creating 3 separate carousels instead of populating the first is because of this, but I'm not sure how to fix it.

<div class="container">

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="owl-carousel owl-theme">
                <div class="item">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src=".../100px180/" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title"><?php the_title(); ?></h5>
                            <p class="card-text"><?php the_excerpt(); ?></p>
                            <a href="<?php the_permalink(); ?>" class="btn btn-success"> Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        <?php endwhile;
    endif; ?>
</div>

I need it so that instead of creating 3 separate carousels it populates a single one with the latest posts from Wordpress. All help is greatly appreciated!

@Scuzzy Answered the problem and it is now fixed. The while loop was at the wrong level. Thank you for your help.