<script>
  stellar.initPlugin(() => {
    const swiper_api = document.getElementById('swiper-api');
    if (swiper_api != undefined) {
      utils.css(`<%- url_for('/css/plugins/swiper.css') %>?v=<%- stellar_info('version') %>`);
      utils.css(`<%- conf.css %>`);
      utils.js(`<%- conf.js %>`, { defer: true }).then(function () {
        const effect = swiper_api.getAttribute('effect') || '';
        var swiper = new Swiper('.swiper#swiper-api', {
          slidesPerView: 'auto',
          spaceBetween: 8,
          centeredSlides: true,
          effect: effect,
          rewind: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      })
    }
  }, 'swiper');
</script>
