Owl Carousel display issues

Question

I have used owl carousel to animate the items from my wordpress Advance custom fields.

This is my code and the items are displaying underneath each other and carousel isn't in play.

References I have used: Basic Owl Carousel Bootstrap 4 Carousel

    <div class="owl-carousel owl-theme">
    <?php 
        $get_feedback = get_field('feedback');
        if(get_feedback){
            
        foreach ($get_feedback as $item) { ?>
    <div class="items">
        <div class="card-feedback">
            <div class="card-body-feedback">
                <h4 class="card-title-feedback"><img src="https://img.icons8.com/ultraviolet/40/000000/quote-left.png"></h4>
                    
                <div class="template-demo">
                <p><?php echo $item['feedback-content'];?></p>
                </div>

                <hr>

                <div class="row">
                    <div class="col-sm-2">
                    <img class="profile-pic" src="https://img.icons8.com/bubbles/100/000000/edit-user.png">
                    </div>

                    <div class="col-sm-10">                           
                        <div class="profile">
                            <h4 class="cust-name"><?php echo $item['name'];?></h4>
                            <p class="cust-profession">Client</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php } 
    }?>
    </div>

Answer 1

The class "items" has a width of 90% if you are also using the bootstrap carousal css. It needs to be outside of the loop like this:

...
<div class="items">     
<?php foreach ($get_feedback as $item) : ?>
    <div class="card-feedback">
       ...
    </div>
<?php endforeach; ?>
</div>