const toggleButtons = document.querySelectorAll('.toggle');
    const sliders = document.querySelectorAll('.carousel');

    for (let i = 0; i < toggleButtons.length; i++) {
        toggleButtons[i].addEventListener('click', function(e) {
            toggleActive(toggleButtons, e);     
            toggleSlider(sliders, e);                
        })
    }
    
    const bodySwiper = new Swiper('.wifi-carousel-section__carousel', {
        // Optional parameters
        direction: 'horizontal',
        slidesPerView: 3,
        slidesPerGroup: 3,
        spaceBetween: 30,
        loop: false,
        preloadImages: false,
        watchOverflow: false,
        lazy: true,
        noSwipingClass: 'swiper-no-swiping',
        observer: true,
        centeredSlides: false,
        breakpoints: {
          321: {
            slidesPerView: 1.15,
            slidesPerGroup: 1,
            watchOverflow: true,
            spaceBetween: 10,            
          },
          390: {
            slidesPerView: 1.3,
            slidesPerGroup: 1,
            centeredSlides: false
          },
          652: {
            slidesPerView: 2,
            slidesPerGroup: 2,
            centeredSlides: false        
          },
          1301: {
            slidesPerView: 3,
            slidesPerGroup: 3,
            centeredSlides: false
          }
        },
        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });  

    const bodyServiceSwiper = new Swiper('.wifi-carousel-section__carousel-service', {
        // Optional parameters
        direction: 'horizontal',
        slidesPerView: 3,
        slidesPerGroup: 3,
        spaceBetween: 30,
        loop: false,
        preloadImages: false,
        watchOverflow: false,
        lazy: true,
        noSwipingClass: 'swiper-no-swiping',
        observer: true,
        centeredSlides: false,
        breakpoints: {
          321: {
            slidesPerView: 1.15,
            slidesPerGroup: 1,
            watchOverflow: true,
            spaceBetween: 10,
            centeredSlides: true
          },
          390: {
            slidesPerView: 1.3,
            slidesPerGroup: 1,
            centeredSlides: false
          },
          652: {
            slidesPerView: 2,
            slidesPerGroup: 2            
          },
          1201: {
            slidesPerView: 3,
            slidesPerGroup: 3
          }
        },
        // If we need pagination
        pagination: {
            el: '.swiper-pagination-service',
            clickable: true
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next-service',
            prevEl: '.swiper-button-prev-service',
        }
    });  


    function toggleActive(buttons, e) {
        for (let i = 0; i < buttons.length; i++) {
            if (e.target === buttons[i]) {
                buttons[i].classList.add('active');
            } else {
                buttons[i].classList.remove('active');
            }
        }
    }

    function toggleSlider(slider, e) {
      const buttonText = e.target.innerText.toLowerCase();

      for (let i = 0; i < slider.length; i++) {
        if (slider[i].classList.contains(buttonText)) {
          slider[i].style.display = 'block';
        } else {
          slider[i].style.display = 'none';
        }
      }

      bodySwiper.update();
      bodyServiceSwiper.update();
    }