[new shortcode] swiper

#232

assets/sass/components/_swiper.scss

@@ -30,3 +30,20 @@
   @include justify-content(center);
   @include flex-direction(column);
 }
+
+.swiper-slide {
+  @include flexbox();
+  @include flex-direction(column);
+
+  &[data-align='center'] {
+    @include align-items(center);
+  }
+  
+  &[data-align='left'] {
+    @include align-items(flex-start);
+  }
+  
+  &[data-align='right'] {
+    @include align-items(flex-end);
+  }
+}

layouts/shortcodes/swiper.html

@@ -0,0 +1,47 @@
+{{ $swiper_style := resources.Get "lib/swiper/swiper.min.css" | resources.Fingerprint }}
+<link rel="stylesheet" href="{{ $swiper_style.RelPermalink }}">
+{{ $swiper_script := resources.Get "lib/swiper/swiper.min.js" | resources.Fingerprint }}
+<script defer src="{{ $swiper_script.RelPermalink }}"></script>
+
+{{ $id := substr (md5 .Inner) 0 16 }}
+{{ $enableNavigation := .Get "enableNavigation" }}
+{{ $enablePagination := .Get "enablePagination" }}
+
+<div id="{{ $id }}" class="swiper-container">
+  <div class="swiper-wrapper">
+    <!-- Slides -->
+    {{ .Inner }}
+  </div>
+  
+  {{ if $enablePagination }}
+    <div class="swiper-pagination"></div>
+  {{ end }}
+
+  {{ if $enableNavigation }}
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+  {{ end }}
+</div>
+
+<script>
+  'use strict';
+
+  document.addEventListener('DOMContentLoaded', function () {
+    {{ $options := .Params }}
+    var options = JSON.parse({{ $options | jsonify }});
+    var id = JSON.parse({{ $id | jsonify }});
+    var enableNavigation = JSON.parse({{ $enableNavigation | jsonify }});
+    var enablePagination = JSON.parse({{ $enablePagination | jsonify }});
+
+    var mySwiper = new Swiper('#' + id, {
+      ...options,
+      pagination: {
+        el: enablePagination ? '.swiper-pagination'  : null,
+      },
+      navigation: {
+        nextEl: enableNavigation ? '.swiper-button-next' : null,
+        prevEl: enableNavigation ? '.swiper-button-prev' : null,
+      },
+    });
+  });
+</script>

layouts/shortcodes/swiperItem.html

@@ -0,0 +1 @@
+<div class="swiper-slide" data-align="{{ .Get "align" | default "center" }}">{{ .Inner | markdownify }}</div>

layouts/shortcodes/tabs.html

@@ -2,7 +2,7 @@
 <div id="{{ $id }}" class="tab">
   <div class="tab__links">
     {{ range .Params }}
-    <button class="tab__link" aria-label="Tab link">{{ . }}</button>
+      <button class="tab__link" aria-label="Tab link">{{ . }}</button>
     {{ end }}
   </div>
   {{ .Inner }}