Flickity- iterating through children

I am working on a project that displays the research an artist did for a video work.
It should allow users to swipe between individual paragraphs of transcript text (one paragraph appearing at a time, full width using Flickity), with links to reference PDFs/images/iframed websites that should pop up within the same window when clicked.
Here is a mockup of how it will look- one stanza of text displaying fullscreen, with accompanying graphics:
355f6e6822269d75bc529664efb65d80e0a9dfab_2_517x324

I have the code set up to iterate through all my separate stanzas, this is working great:

stanzas.php
<div class="gallery js-flickity">
<?php foreach ($stanzas as $stanza): ?>
<div class="gallery-cell">
  <div class="stanza-container">
      <?php snippet('stanza', ['stanza' => $stanza]) ?>
  </div>
</div>
<?php endforeach ?>
</div>

here is the snippet that displays the individual slides:

<?= $stanza->text()->kt() ?>
<?php
$items = $stanza->windows()->toStructure();
foreach ($items as $item): ?>
<div id="mydiv<?= $item->popupnumber()->html() ?>" class="mydiv <?= $item->sizingclass()->html() ?>">
<div id="mydiv<?= $item->popupnumber()->html() ?>header" class="mydivheader">
<?php if ($item->popuptitle()->isNotEmpty()): ?>
<p class="windowTitle"><?= $item->popuptitle()->html() ?></p>
<?php endif ?>
<?php if ($item->newtab()->isNotEmpty()): ?>
<a class="externalLink" href="<?= $item->newtab()->html() ?>" target='_blank'><?php if ($item->newtabtext()->isNotEmpty()): ?><?= $item->newtabtext()->html() ?><?php endif ?> <img alt ="open in new tab" class="svg-cta-sm" src="https://cooperlovano.com/pom/assets/svg/tab.svg" /></a>
<?php endif ?>
<img id="closeButton<?= $item->popupnumber()->html() ?>" alt ="close transcript" class="svg-cta" src="https://cooperlovano.com/pom/assets/svg/close.svg" />
</div>
<!--Image-->
<?php if ($item->toggleimg()->isTrue()): ?>
<img data-flickity-lazyload="<?= $item->mediaurl()->html() ?>" />
<?php endif ?>
<!--pdf-->
<?php if ($item->togglepdf()->isTrue()): ?>
<iframe src="<?= $item->mediaurl()->html() ?>"></iframe>
<?php endif ?>
<!--website-->
<?php if ($item->togglewebsite()->isTrue()): ?>
<iframe src="<?= $item->mediaurl()->html() ?>"></iframe>
<?php endif ?>
</div>
<?php endforeach ?>

For the first 6 children, this all works great.
But for some reason it is not displaying any more than 6 children…!
There are 9 right now that all are published and displaying individually:
Screen Shot 2022-02-17 at 6.44.56 PM

I have also tested it with 8 duplicates of the same exact child (to see if it’s a problem with the content of the 7th, 8th and 9th ones) and only the first 6 appear.

Does anyone know why this may be happening? I have not found anything in Flickity about there being a max number of slides, and I have not set one myself.

Where and how is $stanzas defined?

1 Like

Oh my gosh @texnixe, in a controller that paginated it by 6 :person_facepalming:
Thank you for the question! Saved me many hours

That’s what I thought.

1 Like