Bootstrap 4 carousel with kirby not working

The CMS Questions
1

I have created a carousel with bootstrap and PHP. After adding the PHP it no longer functions correctly, all images are layered on top of each other and the indicators no longer work. I am also trying to use not all images on this page, but only ones in the field CarouselImages which is declared and registered in my blueprint. How do I fix this?

<div id="carousel1" class="carousel slide carousel-fade col-md-12" data-ride="carousel">
    <ol class="carousel-indicators">
        <?php $n=0; foreach($page->images() as $image): ?>
            <li data-target="#carousel1" data-slide-to="<?php echo $n; $n++; ?>" class="<?php if($n==1) echo ' active' ?>">
                <?php echo $n; ?>
            </li>
        <?php endforeach ?> 
    </ol>
    <div class="carousel-inner">
        <?php $n=0; foreach($page->images() as $image): $n++; ?>
            <div class="item<?php if($n==1) echo ' active' ?>">
                <img src="<?php echo $image->url() ?>" alt="<?php echo html($image->title()) ?>" class="img-responsive" />
            </div>
        <?php endforeach ?>
    </div>
</div>
2

Your indicators and slides $n index is out of tune. The $n++ for the indicators should be after the foreach as for the slides.

As regards fetching only files from the field

$images = $page->carouselImages()->toFiles();
3

Something like this should get you going… (untested, and i cant remember if indexOf() is the right thing to get the slides number for indicators.)

<?php $carousel = $page->carouselImages->toFiles(); ?>

<div id="carousel1" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">

  <?php foreach ($carousel as $ind): ?>
    <li data-target="#carousel1" data-slide-to="<?= $ind->indexOf() ?>" class="<?= e($ind->isFirst(), 'active') ?>"></li>
  <?php endforeach ?>

  </ol>
  <div class="carousel-inner">

    <?php foreach ($carousel as $slide): ?>
    <div class="carousel-item <?= e($slide->isFirst(), 'active') ?>">
      <img class="d-block w-100" src="<?= $slide->url() ?>" alt="<?= $slide->alt() ?>">
    </div>
    <?php endforeach ?>

  </div>

</div>
4

Careful, if you don’t pass the collection as argument, you would get the index in relation to all files in the page.

<?= $ind->indexOf($carousel) ?>

Same for isFirst().

But that’s definitely the better approach then then counters.

5

Woops! good catch. More :tea: and toast for me i think…

6

Good idea, haven’t even had one yet…

7

Hey just for the record, when i switched back to bootstrap 3 it worked fine. So the code above does not work with bootstrap 4.

8

Perhaps my code here helps you. This is working fine on Bootstrap 5.

<div class="carousel-inner text-center">

  <?php $count = -1;
  foreach ($page->gallery()->toFiles() as $image) : $count++ ?>
    <?php if ($count == 0) : ?>
      <div class="carousel-item active">
    <?php else : ?>
      <div class="carousel-item">
    <?php endif ?>

        <a class="d-flex justify-content-center" href="<?= $image->url() ?>">
          <img class="d-block mw-100 img img-raised rounded" alt="<?= $image->alt() ?>" src="<?= $image->resize(null, 600)->url() ?>">
        </a>

        <div class="d-flex justify-content-center">
          <div class="carousel-caption col-sm-8">
            <?= $image->beschreibung() ?>
          </div>
        </div>

      </div>
  <?php endforeach ?>
  
</div>

<?php if ($page->gallery()->toFiles()->count() >= 2) : ?>
  <a class="d-none d-sm-flex carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only text-dark">ZurĂĽck</span>
  </a>
  <a class="d-none d-sm-flex carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
    <span class="sr-only text-dark">Weiter</span>
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </a>

  <ol class="carousel-indicators">
      <?php $count = -1;
    foreach ($page->gallery()->toFiles() as $image) : $count++ ?>
      <li data-bs-target="#carouselExampleIndicators" <?php if ($count == 0) : ?> class="active" <?php endif ?> data-bs-slide-to="<?= $count ?>"></li>
    <?php endforeach ?>
  </ol>
<?php endif ?>
1 Like