50 lines (49 with data), 2.6 kB

<div class="accordion-item slider {{ klass }}" id="{{ id }}"
  data-mne-tags="{% for tag in tags %} {{ tag }} {% endfor %}">
  <div class="accordion-header" id="accordion-header-{{ id }}">
    <button class="accordion-button pt-1 pb-1" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-{{ id }}" aria-expanded="true" aria-controls="accordion-collapse-{{ id }}">
      <div class="w-100">
        <span class="me-auto"><a href="#{{ id }}" class="text-decoration-none">{{ title }}</a></span>
        {% for tag in tags %}
        <span class="badge bg-primary rounded-pill float-end me-1" data-mne-tag="{{ tag }}">
          {{ tag }}
        </span>
        {% endfor %}
      </div>
    </button>
  </div>
  <div id="accordion-collapse-{{ id }}" class="accordion-collapse collapse {{ show }}" aria-labelledby="accordion-header-{{ id }}">
    <div class=" accordion-body">
      <div class="mx-auto d-block w-75">
        <label for="slider-{{ id }}" class="form-label small">
          Move the slider or click on the image and use the <kbd>←</kbd> and <kbd>→</kbd> keys to browse.
        </label>
        <input type="range" class="form-range" min="0" max="{{ images|length - 1 }}" value="{{ start_idx }}"
          id="slider-{{id}}">
      </div>
      <div id="corousel-{{ id }}" class="carousel carousel-dark" data-bs-interval="false" data-bs-wrap="false" data-bs-keyboard="true">
        <div class="carousel-inner">
          {% for idx, img, caption in range(images|length)|zip(images, captions) %}
          <div class="carousel-item {% if idx == start_idx %}active{% endif %}">
            <figure class="figure mx-auto d-block ">
              <img class="figure-img img-fluid rounded mx-auto my-0 d-block" alt="{{title}}"
                src="data:image/{{ image_format }};base64,{{ img }}">
              <figcaption class="figure-caption text-center">
                {{ caption }}
              </figcaption>
            </figure>
          </div>
          {% endfor %}
        </div>
        {# <button class="carousel-control-prev" type="button" data-bs-target="#corousel-{{id}}" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#corousel-{{id}}" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button> #}
      </div>
    </div>
  </div>
</div>