Question

我正在使用Foundation 6和块网格结构来显示一些PDF下载（截图）。页面上有6个，2行3列。

我已将代码挂钩到Owl Carousel但是，这会将所有6列放入一行。有没有办法阻止这种情况发生？如果需要，我愿意使用另一个轮播脚本。

这是我的代码（网站是基于WordPress构建的）：

<?php if( have_rows('colouring', 'option') ): ?>

 <div id="carousel-colouring" class="owl-carousel row large-up-3">

  <?php while ( have_rows('colouring', 'option') ) : the_row(); ?>

   <?php                        
    $file = get_sub_field('colouring_pdf');                     
     if ($file) : ?>

   <div class="column text-center">
    <p>IMAGE WILL GO IN HERE</p>
    <a class="button" target="_blank" href="<?php echo $file['url']; ?>">Download</a>   
  </div>
 <?php endif; ?>    

<?php endwhile; ?>

</div><!-- #carousel-colouring -->

                    <?php endif; ?>

请查看截图以了解我的要求：

Answer 1

您需要在另一个容器内设置网格样式，并将对象的容器调用到轮播中。

<div class="container">
    <div class="object-container">
        <ul>
            <li class="item1">
                <div class="object">
                    <div class="image-container">
                        <img src="" alt="">
                    </div>
                    <a href="">
                        button
                    </a>
                </div>
            </li>
            <li class="item2">
                <div class="object">
                    <div class="image-container">
                        <img src="" alt="">
                    </div>
                    <a href="">
                        button
                    </a>
                </div>
            </li>
            <li class="item3">
                <div class="object">
                    <div class="image-container">
                        <img src="" alt="">
                    </div>
                    <a href="">
                        button
                    </a>
                </div>
            </li>
            <li class="item4">
                <div class="object">
                    <div class="image-container">
                        <img src="" alt="">
                    </div>
                    <a href="">
                        button
                    </a>
                </div>
            </li>
            <li class="item5">
                <div class="object">
                    <div class="image-container">
                        <img src="" alt="">
                    </div>
                    <a href="">
                        button
                    </a>
                </div>
            </li>
            <li class="item6">
                <div class="object">
                    <div class="image-container">
                        <img src="" alt="">
                    </div>
                    <a href="">
                        button
                    </a>
                </div>
            </li>
        </ul>
    </div>
</div>

我理解你是动态地提取数据，所以你需要以某种方式计算项目并根据可用的项目数量（

）创建每个项目。不知道该怎么做，但我确信有一种方法可以使用PHP的for循环。使用数组，使用count函数和for循环可能吗？不确定，但希望我能以某种方式帮助：）

保持猫头鹰轮播中的网格结构

1 个答案: