From 61d704226a5886cab0694a2237c236c8b0d56349 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Fri, 4 Aug 2023 18:09:44 +0200
Subject: [PATCH] IMPR: glide slider

---
 .../ElementalBasics/Elements/SliderElement.ss | 22 +++++++++----------
 templates/Includes/SlideItem_media.ss         |  6 ++---
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/templates/A2nt/ElementalBasics/Elements/SliderElement.ss b/templates/A2nt/ElementalBasics/Elements/SliderElement.ss
index ad458b5..ed19daf 100755
--- a/templates/A2nt/ElementalBasics/Elements/SliderElement.ss
+++ b/templates/A2nt/ElementalBasics/Elements/SliderElement.ss
@@ -8,29 +8,27 @@
 <% end_if %>
 
 <% if $SlideShow %>
-<div class="element__content">
+<div class="element__content<% if $SlidesInRow >1 %> container<% end_if %>">
     <div
         id="Carousel{$ID}"
-        class="element__carousel carousel slide js-carousel
+        class="glide
         <% if $SlidesInRow > 1 %>
             carousel-multislide
         <% end_if %>"
-        <% if $SlidesInRow > 1 %>
-            data-length="{$SlidesInRow}"
-        <% end_if %>
+        data-per-view="<% if $SlidesInRow >1 %>{$SlidesInRow}<% else %>1<% end_if %>"
         <% if $SlideShow.count > 1 %>
             <% if $Interval %> data-bs-interval="$Interval"<% end_if %>
             data-bs-indicators="true" data-bs-arrows="true"
         <% end_if %>
     >
-        <div class="carousel-inner">
-            <% loop $SlideShow %>
-                <div class="carousel-item carousel-item-{$SlideType}<% if no $Controls %> carousel-item-nocontrols<% end_if %><% if $First %> active<% end_if %>">
-                    <div class="carousel-slide">
+        <div class="glide__track" data-glide-el="track">
+            <ul class="glide__slides">
+                <% loop $SlideShow %>
+                    <li class="glide__slide">
                         <% include SlideItem %>
-                    </div>
-                </div>
-            <% end_loop %>
+                    </li>
+                <% end_loop %>
+            </ul>
         </div>
     </div>
 </div>
diff --git a/templates/Includes/SlideItem_media.ss b/templates/Includes/SlideItem_media.ss
index 087c699..0dbb218 100755
--- a/templates/Includes/SlideItem_media.ss
+++ b/templates/Includes/SlideItem_media.ss
@@ -11,9 +11,9 @@
     <% else %>
         <% if $Image || $ImageURL %>
             <span class="img">
-                <img class="carousel__img"
-                    src="<% if $ImageURL %>$ImageURL<% else %>$Image.FocusFill($SlideWidth,$SlideHeight).URL<% end_if %>"
-                    loading="lazy"
+                <img class="glide__img"
+                    src="{$EmptyImgSrc}"
+                    data-lazy-src="<% if $ImageURL %>$ImageURL<% else %>$Image.FocusFill($SlideWidth,$SlideHeight).URL<% end_if %>"
                     alt="<% if $Headline %>$Headline.XML<% end_if %>"
                 />
             </span>