Fetch Slideshow in Popup with AJAX

Hello,
I’m trying to open each of my Projects (Children of projects.php, just images) in a popup div with a swiper slideshow in it.

First I made a snippet for my slideshow in my project.php file, called slideshow.php:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <?php foreach ($page->images() as $image): ?>
      <div class="swiper-slide">
        <img src="<?= $image->url() ?>"
      </div>
    <?php endforeach ?>
  </div>
</div>

<script>
const swiper = new Swiper('.swiper-container', {
  // slideshow options
});
</script>

The script tag is important to call the slideshow, that’s why I placed it in the snippet.

Then I called the snippet in my content representation of the project page, project.json.php:

<?php
$data = snippet('slideshow', [], true);

echo json_encode($data);

I then fetched the given data in an overlay div when I click on a thumbnail on my projects.php file:

const projects = document.querySelectorAll('a.load');
const container = document.querySelector('#container')
const containercontent = container.querySelector('.containercontent')

projects.forEach((project) => {
  project.addEventListener('click', function(e) {
    e.preventDefault();
    container.classList.add('open');

    let url = this.getAttribute('href') + '.json';
    loadContent(url);
  });
});

function loadContent(url) {
  fetch(url)
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      containercontent.innerHTML = data
    })
    .catch(function(error) {
      console.log(error)
    });
  
};

When I click the thumbnail, the div pops up and my slideshow snippet with the images gets rendered. But the slideshow does not work. It seems like the script tag for calling the slideshow (in my snippet) doesn’t run.

Any help?

You are using Kirby headless and fetching the stuff into a javascript front end of some kind? Content representations are for just that - content. You would need to set the slide show script up on the front end side, not in the content rep.