Question

我的问题是猫头鹰轮播克隆该项目我从获得评论开始

 <?php
  if($total_num_of_rev > 0) { ?>
    <div class="row">
    <?php
    $numOfCols = 6;
    $rowCount = 0;
    foreach($review_list_data as $key => $review_data) { ?>

然后我将它们放在html代码中，如下所示：

    <div class="row">
                   <?php
  if($total_num_of_rev > 0) { ?>
    <div class="row">
    <?php
    $numOfCols = 6;
    $rowCount = 0;
    foreach($review_list_data as $key => $review_data) { ?>
          <div class="col-md-12">
            <div class="owl-carousel-3col" data-dots="false">
              <div class="item">
                <div class="testimonial style1">
                  <div class="comment bg-theme-colored">
                    <p class="font-15 pl-0 text-white"><?=$review_data['content']?></p>
                  </div>
                  <div class="thumb content mt-10 mb-10">
                     <?php
            if($review_data['photo']) { ?>
              <img class="img-circle" alt="" src="<?=SITE_URL.'images/review/'.$review_data['photo']?>">
            <?php
            } else { ?>
              <img src="images/placeholder_avatar.jpg">
            <?php
            } ?>
                  </div>
                  <h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
                  <h6 class="title text-white mt-0 mb-15">Designer</h6> 
                </div>
              </div>


          </div>
          <div class="row"></div>
        </div>

<?php
   $rowCount++;
    } ?>
    <?php
  } ?>
      </div>

问题的屏幕截图

    <section class="divide" data-bg-img="images/bg/bg8.jpg" style="background: 50% 97px rgb(17, 17, 17);">

          <div class="container pt-60 pb-60">

            <div class="section-title text-center">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <h2 class="text-uppercase text-white line-bottom-center mt-0">What Claint's <span class="text-theme-colored2">Say</span></h2>
                  <div class="title-flaticon">
                    <i class="flaticon-charity-alms"></i>
                  </div>
                  <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem<br> voluptatem obcaecati!</p>
                </div>
              </div>
            </div>
            <div class="row">
         <?php
      if($total_num_of_rev > 0) { ?>
        <div class="row">
        <?php
        $numOfCols = 6;
        $rowCount = 0;
        foreach($review_list_data as $key => $review_data) { ?>
              <div class="col-md-12">
                <div class="owl-carousel-3col" data-dots="false">
                  <div class="item">
                    <div class="testimonial style1">
                      <div class="comment bg-theme-colored">
                        <p class="font-15 pl-0 text-white"><?=$review_data['content']?></p>
                      </div>
                      <div class="thumb content mt-10 mb-10">
                         <?php
                if($review_data['photo']) { ?>
                  <img class="img-circle" alt="" src="<?=SITE_URL.'images/review/'.$review_data['photo']?>">
                <?php
                } else { ?>
                  <img src="images/placeholder_avatar.jpg">
                <?php
                } ?>
      </div>
                      <h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
                      <h6 class="title text-white mt-0 mb-15">Designer</h6> 
                    </div>
                  </div>


              </div>
              <div class="row"></div>
            </div>
  </div>
                  <h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
                  <h6 class="title text-white mt-0 mb-15">Designer</h6> 
                </div>
              </div>


          </div>
          <div class="row"></div>
        </div>

<?php
   $rowCount++;
    } ?>
    <?php
  } ?>
      </div>
    </section>

我认为我在javascript中有错误，但不确定：

var $owl_carousel_3col = $('.owl-carousel-3col');
        if ( $owl_carousel_3col.length > 0 ) {
            if(!$owl_carousel_3col.hasClass("owl-carousel")){
                $owl_carousel_3col.addClass("owl-carousel owl-theme");
            }
            $owl_carousel_3col.each(function() {
                var data_dots = ( $(this).data("dots") === undefined ) ? false: $(this).data("dots");
                var data_nav = ( $(this).data("nav")=== undefined ) ? false: $(this).data("nav");
                var data_duration = ( $(this).data("duration") === undefined ) ? 4000: $(this).data("duration");
                $(this).owlCarousel({
                    rtl: THEMEMASCOT.isRTL.check(),
                    autoplay: true,
                    autoplayTimeout: data_duration,
                    loop: false,
                    rewind: true,
                    items: 6,
                    margin: 15,
                    dots: data_dots,
                    nav: data_nav,
                    navText: [
                        '<i class="fa fa-chevron-left"></i>',
                        '<i class="fa fa-chevron-right"></i>'
                    ],
                    responsive: {
                        0: {
                            items: 1,
                            center: false
                        },
                        480: {
                            items: 1,
                            center: false
                        },
                        600: {
                            items: 1,
                            center: false
                        },
                        750: {
                            items: 2,
                            center: false
                        },
                        960: {
                            items: 2
                        },
                        1170: {
                            items: 3
                        },
                        1300: {
                            items: 3
                        }
                    }
                });
            });
        }

Answer 1

您的问题似乎是您的foreach循环的位置。您要循环项目，而不是整个列。基本上，您要为每个评论创建一个轮播，猫头鹰会用该商品的副本填充整个容器的宽度。

将foreach循环放在

<div class="item">

然后重试。

Answer 2

我把foreach放在项目之前以下代码之一：

build.gradle

screenshot

Answer 3

我设法解决了这个问题要修复它，我需要在循环中放入一个div 但是似乎每个循环结束之间都有一个空项目

   <section class="divide" data-bg-img="images/bg/bg8.jpg" style="background: 50% 97px rgb(17, 17, 17);">

      <div class="container pt-60 pb-60">

                  <div class="section-title text-center">
                    <div class="row">
                      <div class="col-md-8 col-md-offset-2">
                        <h2 class="text-uppercase text-white line-bottom-center mt-0">What Claint's <span class="text-theme-colored2">Say</span></h2>
                        <div class="title-flaticon">
                          <i class="flaticon-charity-alms"></i>
                        </div>
                        <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem<br> voluptatem obcaecati!</p>
                      </div>
                    </div>
                  </div>


        <div class="row">
          <div class="col-md-12">
            <div class="owl-carousel-3col" data-dots="">
               <?php
  if($total_num_of_rev > 0) { ?>
    <div class="">
    <?php
    $numOfCols = 3;
    $rowCount = 0;
    foreach($review_list_data as $key => $review_data) { ?>
              <div class="item">
                <div class="testimonial style1">
                  <div class="comment bg-theme-colored">
                    <p class="font-15 pl-0 text-white"><?=$review_data['content']?></p>
                  </div>
                  <div class="thumb content mt-10 mb-10">
                     <?php
            if($review_data['photo']) { ?>
              <img class="img-circle" alt="" src="<?=SITE_URL.'images/review/'.$review_data['photo']?>">
            <?php
            } else { ?>
              <img src="images/placeholder_avatar.jpg">
            <?php
            } ?>
                  </div>
                  <h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
                  <h6 class="title text-white mt-0 mb-15">Designer</h6> 
                </div>

                </div>
              </div>
              <div class="">
                <?php
                  $rowCount++;

    } ?>
    <?php
  } ?>
              </div>


              </div>

          </div>
         </div>           
        </div>
              </div>
              </section>

这是它的外观 Screenshot 1 screenshot 2

有什么帮助吗？

猫头鹰轮播克隆了PHP问题

3 个答案: