Flickity Carousel displays only the first image

Kirby 2 Solved ✅
1

hey guys, been searching for a bit on how to properly integrate a carousel (https://flickity.metafizzy.co/) into a php template (project.php), but couldn’t understand it (newb)

So after i added the correct class name, all the images become hidden (yay) except the first one, but when i click on the button to load the next image, it doesn’t show up… Don’t really know how to fix it.

Here’s the code, really hoping someone can help out, and thanks in advance:

<?php snippet('header') ?>

  <main class="main" role="main">

    <header class="wrap">
      <h1><?= $page->title()->html() ?></h1>
      <div class="intro text">
        <?= $page->year() ?>
      </div>
      <hr />
    </header>

    <div class="text wrap main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>



      <?= $page->text()->kirbytext() ?>

      <?php
      // Images for the "project" template are sortable. You
      // can change the display by clicking the 'edit' button
      // above the files list in the sidebar.
      foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
        <div class="carousel-cell">
          <img src="<?= $image->url() ?>" alt="<?= $page->title()->html() ?>" />
        </div>
      <?php endforeach ?>

    </div>

    <?php snippet('prevnext') ?>

  </main>

<?php snippet('footer') ?>
2

I would take that out of the carousel div :slight_smile: Its exepecting a list of elements to slide and im guessing this isnt something you want to slide.

Try:

<?php snippet('header') ?>

  <main class="main" role="main">

    <header class="wrap">
      <h1><?= $page->title()->html() ?></h1>
      <div class="intro text">
        <?= $page->year() ?>
      </div>
      <hr />
    </header>
   
<?= $page->text()->kirbytext() ?>
  
<div class="text wrap main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>

      <?php
      // Images for the "project" template are sortable. You
      // can change the display by clicking the 'edit' button
      // above the files list in the sidebar.
      foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
        <div class="carousel-cell">
          <img src="<?= $image->url() ?>" alt="<?= $page->title()->html() ?>" />
        </div>
      <?php endforeach ?>

    </div>

    <?php snippet('prevnext') ?>

  </main>

<?php snippet('footer') ?>

The only things you should have in main-carousel is literally a list of <div class="carousel-cell"> elements, with images inside.

Also, you should investigate file meta data, becuase currently all your images will have the same ALT tag. You can add fields to your files to store alt text and captions and whatever. See here.

I supect your sort isnt working either. As i understand it, you need a field in the image meta data called ‘sort’ for that work. You probably want to do ->sortBy('filename', 'asc') instead.

3

I’d create a separate container without the text wrap classes for the slider, then remove the default image styles from the CSS

<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>


      <?php
      // Images for the "project" template are sortable. You
      // can change the display by clicking the 'edit' button
      // above the files list in the sidebar.
      foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
        <div class="carousel-cell">
          <img src="<?= $image->url() ?>" alt="<?= $page->title()->html() ?>" />
        </div>
      <?php endforeach ?>
</div>

I think the problem is that the default image with of 100% is conflicting here.

4

Thanks guys it helped to rearrange the css classes around, and playing with the div widths - problem solved!