hugo-theme-zzo/layouts/shortcodes/swiper.html

{{ $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 () {
    {{ $swiper := .Site.Data.swiper }}
    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 }});

    if (optionName) {
      var parsedOptions = Object.assign({}, options[optionName]);
    }

    if (optionName && enablePagination) {
      parsedOptions.pagination = {
        el: '.swiper-pagination',
      };
    }
    
    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>