Dynamic Carousel

Hi!

I'm trying to program a carousel with images. The number of images varies depending on the cell assignment (CellAssignmentQuota). The carousel in the Lighthouse Question Library seems to be for asking questions in a carousel format, but I simply want to show respondents a set of images and then ask them about those images after.

I have some code from a previous survey that worked for a finite set of images (6 images) but I'd like to adjust this code somehow to make it reference a list instead so that it can be dynamic.

Here's the code which was used in a Text question:

Header2:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner">

    <div class="carousel-item active" data-interval="18000">

      <img src="[%GraphicsPath()%]cbc/carousel/Slide1.PNG" class="d-block w-100">

    </div>

    <div class="carousel-item" data-interval="10000">

      <img src="[%GraphicsPath()%]cbc/carousel/Slide2.PNG" class="d-block w-100">

    </div>

    <div class="carousel-item" data-interval="10000">

      <img src="[%GraphicsPath()%]cbc/carousel/Slide3.PNG" class="d-block w-100">

    </div>

    <div class="carousel-item" data-interval="10000">

      <img src="[%GraphicsPath()%]cbc/carousel/Slide4.PNG" class="d-block w-100">

    </div>

    <div class="carousel-item" data-interval="10000">

      <img src="[%GraphicsPath()%]cbc/carousel/Slide5.PNG" class="d-block w-100">

    </div>

    <div class="carousel-item" data-interval="15000">

      <img src="[%GraphicsPath()%]cbc/carousel/Slide6.PNG" class="d-block w-100">

    </div>

  </div>

  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

And then Footer:

<style>

.carousel-control-prev-icon, .carousel-control-next-icon {

  background-color: #b4b4b4;

</style>

<script>

$(document).ready(function(){

    $('.submit_div').hide();

    var submitButtonsDelay = 62;

    var interval = setInterval(function(){

        submitButtonsDelay--;

        if (submitButtonsDelay <= 0) {

            $('.submit_div').show();

            clearInterval(interval);

    }, 1000);

});

</script>