Create two lines with Owl Carousel inside a foreach

Question

Create two lines with Owl Carousel inside a foreach

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a loop that brings 12 images or more. Being that the presentation of these images should follow the following layout:

So,assoonas"next" is pressed a new block will appear with 6 more items following the order: 7, 8, 9, 10, 11,

The big problem I face is only in the presentation of these two lines that I can not get because of some logic problem in my loop .

    <div class="col-md-8">         
        <ul>
          <div id="owl-programacao" > 
            foreach ($listas $key => $itens) { ?>
                 <li><img src="$itens['src']"></li>
            <?php } ?>
          </div>    
        </ul>
    </div>

 $("#owl-programacao").owlCarousel({
    items:6,   
    navigation: true
});

The result of the above script is only the presentation of a single line with 6 items, a common carousel.

php css owl-carousel

asked by anonymous 25.01.2017 / 15:04

2 answers

Removing "BC" from Timestamp dates in Postgresql A3 Digital Certificate with C # X509Certificate2

score 1 · Answer 1

You can use array_chunk to cut the array into pieces. In case it will cut into 2 pieces. So if you have 12, it will be 6 on top and 6 on bottom.

You have to get the total of items and divide by 2, and put the result in the second parameter of array_chunk .

<?php 

   # Aqui você pega o total de registros e divide por 2 para pegar metade. 
   # O resultado você coloca no segundo parâmetro do array_chunk().

   $metade = ceil(count($listas) / 2);

   # Separa ímpares de pares.

   $odd    = $even = array();
   foreach (array_chunk($listas, 2) as $chunk) {
      $even[]  = $chunk[0];

      if(!empty( $chunk[1])){
         $odd[] = $chunk[1];
      }
   }

   # Array final
   $foo = array_merge($even, $odd);

?>

<div class="col-md-8">         
    <?php foreach (array_chunk($foo, $metade) as $chunk) { ?>
      <div class="owl-carousel owl-programacao"> 
         <?php foreach ($chunk as $itens) { ?>
            <div class="item"><img src="<?=$itens['src']?>"></div>
         <?php } ?>
      </div>    
   <?php } ?>
</div>

JS

$("#owl-programacao").owlCarousel({
    navigation: true
});

score 0 · Answer 2

One suggestion: use the for native of php instead of foreach

<div class="col-md-8">         
  <div id="owl-programacao">
    <?php for($i = 0; i < count($listas); i++): ?>
      <?php if ($index % 6 == 0) echo "<div>" // abre um slide a cada 6 iterações ?>

      <img src="<?php echo $listas[$i]['src']?>" />

      <?php if ($index % 6 == 0) echo "</div>" // fecha um slide a cada 6 iterações ?>
    <?php endfor; ?>
  </div>    
</div>

And for javascript, you can get items: 6 of options.

 $("#owl-programacao").owlCarousel({   
    navigation: true
});