Carousels within accordion not properly displaying

1

Dear all,

I am stuck!

I am trying to get carousels (Flickity) to work inside an accordion.
When the accordion is all opened up they seem to work (with some delay due to heady images I would guess, but still…), as soon as I add a “collapsed” class and let it be add and removed in my js file everything gets to be messy. All images are on top of each other and do not scroll.

In my snippet I have something like this:

<?php
  $location = $event->location();
  $title        = $event->title();
  $date       = $event->date()->toDate('m.Y');
  $slides     = $event->gallery()->toStructure();
  $text         = $event->eventtext();
?>

  <li class="accordion__item collapsed">
      <a class="event">
        <div class="event__title"><?= $title ?></div>
        <div class="event__location"><?= $location ?></div>
        <div class="event__date"><?= $date ?></div>
        <div class="plus"></div>
      </a>

      <div class="event-content">
          <div class="event-carousel">
            <!-- Slides -->
            <?php foreach ($slides as $slide): 
               $img     = $slide->image()->toFile();
               $credits = $slide->credits();
            ?>
              <div class="carousel-cell">
                <?= $img->thumb(['format' => 'webp']) ?>
              </div>
            <?php endforeach ?>
          </div>

        <div class="content__text"><?= $text ?></div>
      </div>
  </li>

I am trying to render a carousel inside each of my accordion items,
which in my blueprint are subpages.

My js, where I am initialising everything with jQuery looks like that:

  $('.event-carousel').flickity({
    // options
    cellAlign: 'left',
    setGallerySize: false,
    freeScroll: true,
    wrapAround: true,
    prevNextButtons: false,
    pageDots: false
  });

  $('.accordion__item').on('click', function() {
    var $this = $(this);
    // When close, open
    if ($this.hasClass('collapsed')) {
      $('.accordion__item').addClass('collapsed');
      $this.removeClass('collapsed');
    // When open, close
    } else {
      $this.addClass('collapsed');
    }
  });

From the moment everything seems to work when my items are not collapsed into the accordion, I would guess there is something I am missing in my js file?
Or I am just structurally doing something wrong?

Any advice on what might be causing the disruption?

Thank you!

2

Update on my troubleshooting process:

I went to inspect my file to check once more if there were some errors diplayed.
By chance I realised that when slightly enlarging or reducing the size of the viewport all of a sudden the carousels all work and properly displayed.

I am now very confused!

3

While this is beyond Kirby related support, I suggest you call

$('.event-carousel').flickity({});

Inside your accordion code, i.e. when uncollapsing and destroy() when collapsing.