featured items carousel

site/_includes/layouts/exhibit.html

@@ -1,29 +1,78 @@
 ---
 layout: page 
 ---
+<script src="{{ '/assets/vendor/flickity.min.js' | url }}"></script>
+<link rel="stylesheet" href="{{ '/assets/vendor/flickity.min.css' | url }}"/>
 
 <div class="md:flex md:flex-row-reverse justify-between md:gap-x-8">
-  <div class="md:basis-2/5 lg:basis-1/2 mx-[calc(50%-50vw)] md:mx-0 border-y border-neutral md:border-none p-5 md:p-3">
-    <div class="hidden md:block text-2xl font-bold mb-2">Featured Items</div>
-    <div class="columns-5 md:columns-2 lg:columns-4 gap-x-2">
-    {% for item in featured_items %}
-      <div class="mb-2 not-prose ">
-        <a href="{{ '/item/'| append: item.id | url }}" class="block tooltip tooltip-bottom" data-tip="{{ item.label | escape | truncatewords: 4, '...' }}">
-          {% capture img_url %}https://d1b7k5w7yjwpfg.cloudfront.net/iiif/2/bibliopolitica_{{ item.id }}_{{ item.id }}_001/full/800,/0/default.jpg{% endcapture %}
-          <img src="{{ img_url }}" class="" />
-        </a>
-      </div> 
-    {% endfor %}
+  <div class="md:basis-2/5 lg:basis-1/2 mx-[calc(50%-50vw)] md:mx-0 border-b border-neutral md:border-none px-5 md:px-3">
+    <div class="md:text-right ml-2">
+      <button id="prev-feature" class="h-8 w-8 md:h-12 md:w-12 md:-mr-2 text-accent hover:text-neutral-content tooltip tooltip-left" data-tip="Previous">{% include "svg/arrow-left.svg" %}</button>
+      <button id="play-feature" class="hidden h-8 w-8 md:h-12 md:w-12 md:-mr-2 text-accent hover:text-neutral-content tooltip tooltip-bottom" data-tip="Autoplay">
+        {% include "svg/play.svg" %}
+      </button>
+      <button id="pause-feature" class="h-8 w-8 md:h-12 md:w-12 md:-mr-2 text-accent hover:text-neutral-content tooltip tooltip-bottom" data-tip="Pause">
+        {% include "svg/pause.svg" %}
+      </button>
+      <button id="next-feature" class="h-8 w-8 md:h-12 md:w-12 text-accent hover:text-neutral-content tooltip tooltip-right" data-tip="Next">{% include "svg/arrow-right.svg" %}</button>
+    </div>
+    <div id="feature-carousel" class="w-full md:text-right no-prose flex-none">
+      {% for item in featured_items %}
+      <a class="link no-underline w-full" href="{{ '/item/'| append: item.id | url }}">
+        <div class="w-full h-full">
+          <div class="ml-4">
+            {% capture img_url %}https://d1b7k5w7yjwpfg.cloudfront.net/iiif/2/bibliopolitica_{{ item.id }}_{{ item.id }}_001/full/800,/0/default.jpg{% endcapture %}
+              <img src="{{ img_url }}" alt="{{ item.label }}" class="mt-0 w-full h-80 max-h-[40vh] object-center object-cover mx-auto transition-all duration-500 hover:scale-105" />            
+              <div class="link font-bold no-underline leading-snug">{{ item.label }}</div>
+              <div class="md:text-base text-sm mt-2 font-serif leading-snug">
+                {{ item.caption }}
+              </div>
+          </div>
+        </div>
+      </a>
+      {% endfor %}
     </div>
   </div>
   <div class="md:basis-3/5 lg:basis-1/2">
     <div class="prose-lg lg:prose-xl text-base-content [&_p]:leading-relaxed [&_p]:text-wrap font-serif mt-4 mb-20">
       {{ content }}
 
-      {% unless number == collections.exhibit.size %}
-        <a href="{{ '/exhibit' | url }}/{{ number | plus: 1 }}" class="col-start-2 text-right text-base max-w-2xl leading-tight link text-accent hover:text-base-content font-sans">Read Next</a>
+      {% unless number == collections.feature.size %}
+        <a href="{{ '/feature' | url }}/{{ number | plus: 1 }}" class="col-start-2 text-right text-base max-w-2xl leading-tight link text-accent hover:text-base-content font-sans">Read Next</a>
       {% endunless %}
       </div>
     </div>
   </div>
-</div>
+</div>
+
+<script>
+  var prevFeatureButton  = document.querySelector('#prev-feature');
+  var nextFeatureButton  = document.querySelector('#next-feature');
+  var playFeatureButton  = document.querySelector('#play-feature');
+  var pauseFeatureButton = document.querySelector('#pause-feature');
+  var featureCarousel    = new Flickity('#feature-carousel', {
+    wrapAround: true,
+    imagesLoaded: true,
+    prevNextButtons: false,
+    // fade: true,
+    pageDots: false,
+    lazyLoad: true,
+    draggable: true,
+    pauseAutoPlayOnHover: false,
+    autoPlay: 6000 
+  });
+
+  prevFeatureButton.addEventListener('click', () => featureCarousel.previous());
+  nextFeatureButton.addEventListener('click', () => featureCarousel.next());
+
+  playFeatureButton.addEventListener( 'click', function() {
+    featureCarousel.unpausePlayer();
+    pauseFeatureButton.classList.toggle('hidden');
+    playFeatureButton.classList.toggle('hidden');
+  });
+  pauseFeatureButton.addEventListener( 'click', function() {
+    featureCarousel.pausePlayer();
+    pauseFeatureButton.classList.toggle('hidden');
+    playFeatureButton.classList.toggle('hidden');
+  });
+</script>

site/css/styles.css

@@ -5,6 +5,7 @@
 @tailwind components;
 @tailwind utilities;
 
+
 .header-anchor {
   opacity: 20%;
   padding-left: 10px;
@@ -48,3 +49,27 @@ details[open] > summary.meta-summary::before {
 .transcript p {
   padding-top: 1ch;
 }
+
+/* 
+.flickity-page-dots {
+  top: -2px;
+  justify-content: right !important;
+}
+.flickity-page-dot  {
+  width: 12px;
+  height: 12px;
+  opacity: 1;
+  background: transparent;
+  border: 2px solid $text-base-content !important;
+}
+.flickity-page-dot:focus {
+  box-shadow: none !important;
+}
+.flickity-page-dot.is-selected {
+  background: $text-base-content !important;
+} 
+*/
+
+.flickity-button:focus {
+  box-shadow: none !important;
+}

tailwind.config.js

@@ -15,7 +15,7 @@ module.exports = {
       {
         light: {
           ...require("daisyui/src/theming/themes")["light"],
-          "base-100": "#f5f0e6", // alabaster
+          "base-100": "#f5f0e6", /* alabaster */
           "base-content": "#230616", // dark purple
           "accent": "#006642", // dartmouth green "#007A50", // dark spring green
           "secondary": "#a6673e", // brown sugar