malin
March 13, 2018, 10:43am
1
Hallo,
i would like to create carousel with 6 projects on one slide, but i can create only one project on the slide, Mayby somoeone help me
This is the fragment of code:
<div class="carousel-inner">
<?php foreach($projects as $project): ?>
<div class="carousel-item projectitem">
<ul class="row projects">
<li class="project mt-3 mt-lg-4 col-12 col-md-6 col-lg-4">
<a href="<?= $project->url() ?>" class="project-href">
<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): $thumb = $image->crop(500, 300); ?>
<img src="<?= $thumb->url() ?>" class="img-fluid zdjproject" alt="<?= $project->title()->html() ?>">
<?php endif ?>
<div class="project-title">
<h3 class="project-name"><?= $project->title()->html() ?></h3>
</div>
</a>
</li>
</ul>
</div>
<?php endforeach ?>
</div>
.carousel-inner - hold all of the slides
.carousel-item projectitem - is one of the slides
li - one of six projects
I donβt know how can i create the lop with six li in one .carousel-item
your foreach loop has to be moved to wrap the li tags instead of the carousel item container. you might want to limit your number of projects as well using $projects->limit(6)
malin
March 13, 2018, 10:53am
3
Ok, Thank You, but How can I create next .carousel-item with next 6 items?
what is supposed to be in the carousel items and what in the li tags? do you want to create groups of six projects each?
malin
March 13, 2018, 11:07am
5
Exactly. I have group of projects (their quantity is growing) and i have to group them into 6
Into the li I have first image of project and title
Then chunk()
is what you are looking for: https://getkirby.com/docs/cheatsheet/pages/chunk
<?php
$chunks = $projects->chunk(6);
<div class="carousel-inner">
<?php foreach($chunks as $chunk): ?>
<div class="carousel-item projectitem">
<ul class="row projects">
<?php foreach($chunk as $project): ?>
<li class="project mt-3 mt-lg-4 col-12 col-md-6 col-lg-4">
<a href="<?= $project->url() ?>" class="project-href">
<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): $thumb = $image->crop(500, 300); ?>
<img src="<?= $thumb->url() ?>" class="img-fluid zdjproject" alt="<?= $project->title()->html() ?>">
<?php endif ?>
<div class="project-title">
<h3 class="project-name"><?= $project->title()->html() ?></h3>
</div>
</a>
</li>
<?php endforeach ?>
</ul>
</div>
<?php endforeach ?>
</div>
malin
March 13, 2018, 11:15am
7
You are my Hero
It works perfectly. Many Many Thanks