0

I am using Foundation 6 and the block grid structure to display some PDF downloads(screenshots). 6 on a page, 2 rows of 3 columns.

I've hooked the code up to Owl Carousel but, this places all 6 columns into a single row. Is there a way to stop this from happening? I am open to using another carousel script if needs be.

Here is my code (Site is being built upon 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; ?>

Please see screenshot to see what I require:

enter image description here

Huw Rowlands
  • 393
  • 3
  • 16

1 Answers1

0

you'd need to style the grid inside another container and call the container of the objects into the carousel. 

<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>

I understand you're pulling in the data dynamically, so you'll need to somehow count the items and create each per the amount of items (

  • ) available. Not sure how to do that, but I'm sure there's a way with using PHP's for loop. Using an array, using count function along with a for loop maybe? Not sure but hope I helped somehow :)
    • Kurtis Rogers
    • 95
    • 5