add class and data attributes to sliders and lists to enable easier customisation

Author: l0ud0gg

site/templates/collection/list.jet

@@ -2,9 +2,9 @@
 
 {{block pageCollectionList(showTitle=true)}}
 {{if len(.Items) > 0}}
-<section class="page-collection page-collection-list page-collection-list-{{.ItemsPerRow}} page-collection-list-{{.ItemLayout}} list-{{.ItemsPerRow}} list-{{.ItemLayout}} page-collection-{{.ItemsPerRow}}-list" aria-label="{{i18n("wcag_aria_label_collection_list")}}">
+<section class="page-collection page-collection-list page-collection-list-{{.ItemsPerRow}} page-collection-list-{{.ItemLayout}} list-{{.ItemsPerRow}} list-{{.ItemLayout}} page-collection-{{.ItemsPerRow}}-list list-{{.TitleSlug}}" aria-label="{{i18n("wcag_aria_label_collection_list")}}">
   <div class="collection-wrapper-container">
-    <div class="collection-container">
+    <div class="collection-container" data-title-slug="{{.TitleSlug}}">
       {{ if showTitle }}
         <div class="page-collection-list-title">
           <h3>{{.DisplayName}}</h3>

site/templates/collection/slider.jet

@@ -3,9 +3,9 @@
 {{import "./slider-buttons.jet"}}
 {{block pageCollectionSlider()}}
 {{if len(.Items) > 0}}
-<section class="page-collection page-collection-slider page-collection-slider-{{.ItemsPerRow}} page-collection-slider-{{.ItemLayout}} slider-{{.ItemsPerRow}} slider-{{.ItemLayout}} page-collection-{{.ItemsPerRow}}-slider" aria-label="{{i18n("wcag_aria_label_collection_slider")}}">
+<section class="page-collection page-collection-slider page-collection-slider-{{.ItemsPerRow}} page-collection-slider-{{.ItemLayout}} slider-{{.ItemsPerRow}} slider-{{.ItemLayout}} page-collection-{{.ItemsPerRow}}-slider slider-{{.TitleSlug}}" aria-label="{{i18n("wcag_aria_label_collection_slider")}}">
   <div class="collection-wrapper-container swiper-wrapper-container">
-    <div class="collection-container swiper-container" data-items-per-row="{{.ItemsPerRow}}" data-layout="{{.ItemLayout}}">
+    <div class="collection-container swiper-container" data-items-per-row="{{.ItemsPerRow}}" data-layout="{{.ItemLayout}}" data-title-slug="{{.TitleSlug}}">
         {{if .DisplayName != ""}}
       <div class="swiper-title">
         <h3>{{.DisplayName}}</h3>