IMPR: glide slider

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-per-view="<% if $SlidesInRow >1 %>{$SlidesInRow}<% else %>1<% end_if %>"
-            data-length="{$SlidesInRow}"
-        <% 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">
+        <div class="glide__track" data-glide-el="track">
-            <% loop $SlideShow %>
+            <ul class="glide__slides">
-                <div class="carousel-item carousel-item-{$SlideType}<% if no $Controls %> carousel-item-nocontrols<% end_if %><% if $First %> active<% end_if %>">
+                <% loop $SlideShow %>
-                    <div class="carousel-slide">
+                    <li class="glide__slide">
                         <% include SlideItem %>
-                    </div>
+                    </li>
-                </div>
+                <% end_loop %>
-            <% end_loop %>
+            </ul>
         </div>
     </div>
 </div>

templates/Includes/SlideItem_media.ss

@@ -11,9 +11,9 @@
     <% else %>
         <% if $Image || $ImageURL %>
             <span class="img">
-                <img class="carousel__img"
+                <img class="glide__img"
-                    src="<% if $ImageURL %>$ImageURL<% else %>$Image.FocusFill($SlideWidth,$SlideHeight).URL<% end_if %>"
+                    src="{$EmptyImgSrc}"
-                    loading="lazy"
+                    data-lazy-src="<% if $ImageURL %>$ImageURL<% else %>$Image.FocusFill($SlideWidth,$SlideHeight).URL<% end_if %>"
                     alt="<% if $Headline %>$Headline.XML<% end_if %>"
                 />
             </span>