Owl Carousel display issues

Issue

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>

enter image description here

Solution

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>

Answered By – Chrostip Schaejn

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published