swiper shortcode - options, padding

#232

data/swiper.json

@@ -0,0 +1,8 @@
+{
+  "option1": {
+    "loop": true
+  },
+  "option2": {
+    "loop": false
+  }
+}

layouts/shortcodes/swiper.html

@@ -27,21 +27,41 @@
   'use strict';
 
   document.addEventListener('DOMContentLoaded', function () {
-    {{ $options := .Params }}
+    {{ $swiper := .Site.Data.swiper }}
-    var options = JSON.parse({{ $options | jsonify }});
+    var options = JSON.parse({{ $swiper | jsonify }});
+    {{ $optionName := .Params.option }}
+    var optionName = JSON.parse({{ $optionName | jsonify }});
+    
     var id = JSON.parse({{ $id | jsonify }});
     var enableNavigation = JSON.parse({{ $enableNavigation | jsonify }});
     var enablePagination = JSON.parse({{ $enablePagination | jsonify }});
 
-    var mySwiper = new Swiper('#' + id, {
+    if (optionName) {
-      ...options,
+      var parsedOptions = Object.assign({}, options[optionName]);
-      pagination: {
+    }
-        el: enablePagination ? '.swiper-pagination'  : null,
+
-      },
+    if (optionName && enablePagination) {
-      navigation: {
+      parsedOptions.pagination = {
-        nextEl: enableNavigation ? '.swiper-button-next' : null,
+        el: '.swiper-pagination',
-        prevEl: enableNavigation ? '.swiper-button-prev' : null,
+      };
-      },
+    }
-    });
+    
+    if (optionName && enableNavigation) {
+      parsedOptions.navigation = {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      };
+    }
+
+    if (enableNavigation) {
+      var allSlideElem = document.querySelectorAll('.swiper-slide__inner');
+      allSlideElem ?
+      allSlideElem.forEach(function (slideElem) {
+        slideElem.style.padding = '0 40px';
+      }) : null;
+    }
+    
+    var mySwiper = new Swiper('#' + id, parsedOptions);
+
   });
 </script>

layouts/shortcodes/swiperItem.html

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