<?php $GLOBALS['TL_CSS'][] = 'files/base/layout/css/elements/custom-elements/ce_rsce_linkboxen.min.css|static';?>
<!-- indexer::stop -->
<div class="<?= $this->class ?> ce_rsce_linkboxen block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>

    <div class="ce--inner container">

        <?php $this->block('headline'); ?>
            <?php if ($this->headline): ?>
                <div class="ce--headline animate__animated animate__fadeInUp">
                    <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
                </div>
            <?php endif; ?>
        <?php $this->endblock(); ?>

        <?php $this->block('content'); ?>

            <?php if (empty($this->articles)): ?>
                <p class="empty"><?= $this->empty ?></p>
            <?php else: ?>
                <div class="swiper pb-0 linkboxes-slider_<?= $this->id; ?>" data-aos="animate__fadeInUp">
                    <div class="swiper-wrapper">
                        <?= implode('', $this->articles) ?>
                    </div>
                </div>
                <div class="linkboxes-slider_<?= $this->id; ?> swiper-button-prev"></div>
                <div class="linkboxes-slider_<?= $this->id; ?> swiper-button-next"></div>

                <script>
                  window.addEventListener('load', function () {
                    if ($('.swiper.linkboxes-slider_<?= $this->id;?>').length) {

                      const swiper_<?php echo $this->id; ?> = new Swiper('.swiper.linkboxes-slider_<?php echo $this->id; ?>', {
                        direction: 'horizontal',
                        loop: true,
                        preloadImages: true,
                        /*lazy: {
                          loadPrevNext: true,
                        },*/
                        spaceBetween:30,
                        centeredSlides: false,
                        slidesPerView: 3,
                        speed: 1500,
                        effect: 'slide',

                        fadeEffect: {
                          crossFade: true
                        },

                        navigation: {
                          nextEl: '.linkboxes-slider_<?= $this->id;?>.swiper-button-next',
                          prevEl: '.linkboxes-slider_<?= $this->id;?>.swiper-button-prev',
                        },

                        breakpoints: {
                          320: {
                            slidesPerView: 1,
                          },
                          480: {
                            slidesPerView: 2,
                          },
                          768: {
                            slidesPerView: 3,
                          },
                          992: {
                            slidesPerView: 3,
                          }
                        }
                      });
                    }
                  }, {passive: true})
                </script>
            <?php endif; ?>

        <?php $this->endblock(); ?>

    </div>

</div>
<!-- indexer::continue -->