https://www.label-emmaus.co/static/js/alpine/custom/societaire//benefitsSwiper.js?v=615087a581

1document.addEventListener('alpine:init', () => {
2  Alpine.data('benefitsSwiper', () => ({
3    swiper: null,
4
5    init() {
6      this.$nextTick(() => {
7        this.setupSwiper();
8      });
9
10      // Handle window resize
11      window.addEventListener('resize', () => {
12        this.handleResize();
13      });
14    },
15
16    handleResize() {
17      if (window.innerWidth >= 992) {
18        // md and above: destroy swiper if exists
19        this.destroySwiper();
20      } else {
21        // Under md (mobile): initialize swiper if not exists
22        if (!this.swiper) {
23          this.setupSwiper();
24        }
25      }
26    },
27
28    setupSwiper() {
29      // Setup swiper only on mobile (under md breakpoint)
30      if (window.innerWidth < 992) {
31        this.initSwiper();
32      }
33    },
34
35    initSwiper() {
36      const container = this.$refs.swiperContainer;
37      const wrapper = this.$refs.swiperWrapper;
38
39      if (!container || !wrapper) return;
40
41      // Prepare swiper structure
42      container.classList.add('swiper');
43      wrapper.classList.add('swiper-wrapper');
44
45      // Remove flex layout classes from wrapper when swiper is active
46      wrapper.classList.remove('flex', 'flex-col', 'gap-m');
47
48      // Add swiper-slide class to benefit items
49      const benefitItems = wrapper.querySelectorAll('.benefit-item');
50      benefitItems.forEach((item) => {
51        item.classList.add('swiper-slide');
52        // Keep the flex layout on the slide items themselves
53        item.classList.add('flex', 'flex-col', 'gap-l');
54      });
55
56      // Initialize Swiper with navigation and pagination
57      this.swiper = new Swiper(container, {
58        slidesPerView: 'auto',
59        spaceBetween: 16,
60        navigation: {
61          nextEl: '.swiper-button-next-benefits',
62          prevEl: '.swiper-button-prev-benefits',
63          disabledClass: 'disabled',
64        },
65        pagination: {
66          el: '.swiper-pagination-benefits',
67          clickable: true,
68        },
69      });
70    },
71
72    destroySwiper() {
73      if (this.swiper) {
74        // Remove swiper classes before destroying
75        const container = this.$refs.swiperContainer;
76        const wrapper = this.$refs.swiperWrapper;
77
78        if (container) container.classList.remove('swiper');
79        if (wrapper) {
80          wrapper.classList.remove('swiper-wrapper');
81          // Restore flex layout classes
82          wrapper.classList.add('flex', 'flex-col', 'gap-m');
83        }
84
85        const benefitItems = wrapper?.querySelectorAll('.benefit-item');
86        benefitItems?.forEach((item) => {
87          item.classList.remove('swiper-slide');
88        });
89
90        this.swiper.destroy(true, true);
91        this.swiper = null;
92      }
93    },
94
95    destroy() {
96      this.destroySwiper();
97    },
98  }));
99});