https://sanidrome.nl/wp-content/themes/WIM-Elementor-child/js/binnenkijkers-slider.js?ver=1762952796

1jQuery(document).ready(function ($) {
2  if ($(".binnenkijkers-slider.swiper").length) {
3    $(".binnenkijkers-slider.swiper").each(function () {
4      const swiperContainer = this;
5      const $wrapper = $(swiperContainer).find('.swiper-wrapper');
6      const $originalSlides = $wrapper.find('.swiper-slide');
7      const originalSlideCount = $originalSlides.length;
8
9      // Function to calculate minimum slides needed for smooth loop
10      function getMinSlidesForBreakpoint() {
11        const windowWidth = window.innerWidth;
12        if (windowWidth >= 1024) {
13          return 10; // For slidesPerView: 5, need at least 10 slides
14        } else if (windowWidth >= 768) {
15          return 6;  // For slidesPerView: 3, need at least 6 slides
16        } else {
17          return 3;  // For slidesPerView: 1, need at least 3 slides
18        }
19      }
20
21      // Function to duplicate slides if needed
22      function duplicateSlides() {
23        if (originalSlideCount === 0) return;
24
25        const minSlides = getMinSlidesForBreakpoint();
26
27        if (originalSlideCount < minSlides) {
28          const duplicationsNeeded = Math.ceil(minSlides / originalSlideCount) - 1;
29
30          for (let i = 0; i < duplicationsNeeded; i++) {
31            $originalSlides.each(function () {
32              const $clone = $(this).clone(true);
33              $clone.addClass('swiper-slide-duplicate-custom');
34              $wrapper.append($clone);
35            });
36          }
37        }
38      }
39
40      // Function to preload images
41      function preloadImages() {
42        $wrapper.find('img[loading="lazy"]').each(function (index) {
43          const $img = $(this);
44          const imgSrc = $img.attr('src');
45
46          const preloadImg = new Image();
47          preloadImg.onload = function () {
48            $img.removeAttr('loading');
49            $img.css('opacity', '1');
50          };
51
52          setTimeout(() => {
53            preloadImg.src = imgSrc;
54          }, index * 150);
55        });
56      }
57
58      duplicateSlides();
59
60      // Get final slide count after duplication
61      const finalSlideCount = $wrapper.find('.swiper-slide').length;
62
63      // Initialize Swiper
64      const swiper = new Swiper(swiperContainer, {
65        loop: finalSlideCount >= 3, // Enable loop if we have enough slides
66        centeredSlides: true,
67        slidesPerView: 1,
68        spaceBetween: 40,
69        effect: "coverflow",
70        coverflowEffect: {
71          rotate: 0,
72          stretch: 0,
73          depth: 20,
74          modifier: 1.2,
75          slideShadows: false,
76          scale: 1,
77        },
78        autoplay: finalSlideCount > 1 ? {
79          delay: 35009999999999,
80          disableOnInteraction: false,
81        } : false,
82        breakpoints: {
83          768: {
84            slidesPerView: Math.min(3, originalSlideCount),
85          },
86          1024: {
87            slidesPerView: Math.min(5, originalSlideCount),
88          },
89        },
90        on: {
91          init: function () {
92            setTimeout(preloadImages, 300);
93          }
94        }
95      });
96
97      // Handle window resize - re-duplicate slides if needed
98      let resizeTimeout;
99
100      $(window).on('resize', function () {
101        clearTimeout(resizeTimeout);
102        resizeTimeout = setTimeout(function () {
103          const currentSlides = $wrapper.find('.swiper-slide').length;
104          const minNeeded = getMinSlidesForBreakpoint();
105
106          if (currentSlides < minNeeded && originalSlideCount > 0) {
107            $wrapper.find('.swiper-slide-duplicate-custom').remove();
108
109            const duplicationsNeeded = Math.ceil(minNeeded / originalSlideCount) - 1;
110
111            for (let i = 0; i < duplicationsNeeded; i++) {
112              $originalSlides.each(function () {
113                const $clone = $(this).clone(true);
114                $clone.addClass('swiper-slide-duplicate-custom');
115                $wrapper.append($clone);
116              });
117            }
118
119            swiper.update();
120          }
121        }, 300);
122      });
123    });
124  }
125});