مشکل با داینامیک کردن owl carousel

[unid_user 60]

سلام و درود

دوستان گرامی برای داینامیک کردن اسلایدر owl carousel بصورتی که در تصویر می بینید به مشکل خوردم. لطفا راهنمایی کنید.

سپاس و تشکر

 

<div class="row">
  <div class="col-lg-12">
    <div class="bg-white rounded px-3 pt-3">
      <h4 class="text-dark text-right">
        تازه ترین محصولات
      </h4>
      <div id="uxfix-owl-carousel-flex" class="my-4 owl-carousel owl-theme">
        <?php
        $args = array(
          'post_type'      => 'product',
          'posts_per_page' => 6,
          'product_tag' => 'my_tag',
        );

        ?>
        <?php
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) { ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <div class="item">
          <div class="card mb-3">
            <div class="row no-gutters">
              <div class="col-md-4">
                <?php woocommerce_template_loop_product_thumbnail(); ?>
              </div>
              <div class="col-md-8">
                <div class="card-body text-right">
                  <h5 class="card-title">
                    <a href="<?php the_permalink(); ?>" class="text-dark">
                      <?php echo wp_trim_words( get_the_title(), 5 ); ?>
                    </a>
                  </h5>
                  <p class="card-text card-title text-warning">
                    <?php woocommerce_template_loop_price(); ?>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <?php endwhile; ?>
        <?php wp_reset_query(); ?>
        <?php } else {
          echo "<p>با عرض پوزش محصولی جهت نمایش یافت نشد.</p>";
        }
        ?>
      </div>
    </div>
  </div>
</div>

 

با استفاده از کدهایی که خودم نوشتم نتیجه به صورت زیر درمیاد که غلطه.

ویرایش شده 13 خرداد توسط unid_user