Create two lines with Owl Carousel inside a foreach

Asked

Viewed 718 times

4

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

inserir a descrição da imagem aqui

So as soon as the "next" if pressed a new block will appear with 6 more items following the order: 7, 8, 9, 10 , 11, 12.

The big problem I face is only in the presentation of these two lines that I can not by 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 just the presentation single-line with 6 items, a common carousel.

php css owl-carousel

  • Help awe, guys, please!

  • I don’t know this owl-carousel. But have you ever thought of creating a div that would contain the 6 slider blocks in the formation you want, and apply the .owlCarousel in this div?

  • There are semantic problems in your code. div inside ul ?

  • I’ll post you a suggestion.

  • uses a pagination api with transition effect, I will check if I find one that I used and found good :) this solves, because you can position the elements you want and the quantities you want inside containers, and this will already solve

  • or an easier solution, put them all inside a container, (6, 6, 6 ...) and in the Owl-Carousel, take the parent element (the container) and use slide on it

Show 1 more comment

2 answers

2

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

You have to take the total of items and divide by 2, and put the result in the second parameter of the 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
});

  • I understood your intention, but separating groups from "Owl-programming" does not arrive at the result I need, which is to page in blocks of 12, massss cut the "item", can be an output! + 1

  • It worked, as I said above, but without its edition there is no way to put as solution.

  • How so paging in blocks of 12 ? 12 each row ?

  • The order you put was 1º(in the first line) and the 2nd (in the second line, below the 1st), as the picture of the question, the 1st and 2nd should be side by side, understand? Can help?

  • 1

    Haaa understood... I have to think a little, but now I can’t... "/

  • Waiting, my good. Hug.

  • Marshmallow see if it worked... I changed the code.

  • Bro, that <div id="owl-programacao" class="owl-carousel">, in the position it is, is multiplying, generating a new group, if that was your idea, next... Not working, based on the plugin, bro. Because there is only one instance for each Dashboard, that is, in your example, I will have to create an instance for each ID. I only need one. And that the items are side by side. We are almost there, not getting you. ( Marshmallow Hahahs)

  • Dude, call it a class then. Take out the ID='Owl-programming' and put it in the Owl-programming class and call it a class in the plugin.

  • Bro, I finally understood what you wanted to do, but there’s a detail that I’m not sure will impact my question and your answer, try to help me: there may be more than 12, when Count reached 13 he created a third instance, that is, a 3 line, it’s only 2.

  • 1

    So, only two... That’s why in the code I made total records / 2 to get half. But you have to put a Ceil to round. I’m gonna change

  • I’m gonna test!!!!!!

Show 7 more comments

0

A suggestion: use the for php native 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 take the items: 6 of options.

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

  • Why is it better to use the for than the foreach ?

  • I used the for because the problem works with the number of items, so I preferred to use the array indexes. I see no point in using foreach and creating a variable to simulate an index within the foreach, thing that the for makes by default.

Browser other questions tagged php css owl-carousel

You are not signed in. Login or sign up in order to post.