Basic implementation of a carousel

Needs lots of work and tidying up mind...

1 files changed, 28 insertions, 9 deletions

diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html
index 8391cca..2cdebd4 100644
--- a/pyblackbird_cc/templates/resources/resource_detail.html
+++ b/pyblackbird_cc/templates/resources/resource_detail.html
@@ -52,25 +52,44 @@
         </div>
       </div>
     </div>
+
+    
     {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
       <div class="row my-4">
         <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
           <h4>File preview:</h4>
           <p>{{ snapshot_filename|cut:".pdf" }}</p>
-          <div>
-            <div class="d-flex flex-row justify-content-center flex-wrap">
+
+
+          <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
+            <div class="carousel-inner bg-primary">
+
               {% for snapshot_url in snapshot_urls %}
-                <div class="m-4">
-                  <img class="img-thumbnail rounded"
-                       src="{{ snapshot_url }}"
-                       alt="{{ snapshot_filename }}" />
+              {% if forloop.first %}
+              <div class="carousel-item active">
+                {% else %}
+                <div class="carousel-item">
+                  {% endif %}
+                  <img src="{{ snapshot_url }}" class="d-block w-50 mx-auto img-thumbnail rounded" alt="{{ snapshot_name }}">
                 </div>
-              {% endfor %}
+                {% endfor %}
+              </div>
+              <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" 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>
-    {% endfor %}
+
+        {% endfor %}
+
+      
     <div class="row my-5">
       <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
         <div>{{ resource.description | markdown | safe }}</div>