<?php

$GLOBALS['TL_CSS'][] = 'bundles/esalesmediacontaoswiper/js/lib/swiper/' . $GLOBALS['TL_ASSETS']['SWIPERJS'] . '/swiper-bundle.min.css';
$GLOBALS['TL_CSS'][] = 'bundles/esalesmediacontaoswiper/css/swiper-custom.css';

?>

<script src="bundles/esalesmediacontaoswiper/js/lib/swiper/<?= $GLOBALS['TL_ASSETS']['SWIPERJS'] ?>/swiper-bundle.min.js"></script>

<script>
  (function () {
    var cte = document.querySelectorAll(".ce_swiperSliderStart,.swiper-holder");

    for (var i=0; i<cte.length; i++)
    {
      var e = cte[i].querySelectorAll('.swiper-container')[0];
      var w = e.querySelectorAll('.swiper-wrapper')[0];
      var c = {
        initialSlide: 0,
        speed: 300,
        autoHeight: false,
        effect: 'slide',
        slidesPerView: 1,
        slidesPerGroup: 1,
        preloadImages: true,
        loop: false,
        autoplay: false,
        watchSlidesVisibility: true,
        on: {
          afterInit: function(swiper) {
            window.dispatchEvent(new Event('scroll'));
          },
          slideChangeTransitionEnd: function (swiper) {
            window.dispatchEvent(new Event('scroll'));
            if (swiper.slides[swiper.activeIndex] !== undefined
              && (swiper.slides[swiper.activeIndex].classList.contains('-underline-bottom') || swiper.slides[swiper.activeIndex].classList.contains('-underline-top'))
              && !swiper.slides[swiper.activeIndex].classList.contains('-show-underline')) {
              swiper.slides[swiper.activeIndex].classList.add('-show-underline')
            }
          }
        }
      };

      if (w.hasAttribute('data-config'))
      {
        var s = w.getAttribute('data-config').split(',');

        c.speed = parseInt(s[1]);
        c.initialSlide = parseInt(s[2]);

        if (parseInt(s[0]) > 0)
          c.autoplay = {delay: parseInt(s[0]), disableOnInteraction: (parseInt(s[7]) == 1 ? true : false)}

        if (parseInt(s[3]) != 1)
          c.preloadImages = false;

        if (parseInt(s[4]) == 1)
          c.loop = true;

        if (parseInt(s[5]) != '')
          c.navigation = {
            nextEl: cte[i].querySelectorAll('.swiper-button-next')[0],
            prevEl: cte[i].querySelectorAll('.swiper-button-prev')[0],
          };

        if (parseInt(s[6]) == 1)
          c.pagination = {
            el: '.swiper-pagination',
            clickable: true
          };

        if (parseInt(s[8]) == 1)
          c.effect = 'fade';

        if (parseInt(s[9]) > 1)
          c.slidesPerView = parseInt(s[9]);

        if (parseInt(s[10]) > 1)
          c.slidesPerGroup = parseInt(s[10]);

        if (parseInt(s[11]) == 1)
          c.autoHeight = true;

        if (s[12] !== undefined && s[12] !== '')
          c.slideClass = s[12];

      }
      if (w.hasAttribute('data-breakpoints'))
      {
        try {
          var breakpoints = JSON.parse(w.getAttribute('data-breakpoints'));
          c.breakpoints = breakpoints;
        } catch (e)
        {
          console.log('Swiper.js: breakpoint data attribute is not valid JSON');
        }
      }
      new Swiper(e,c);
    }
  })();
</script>