can you load different swiper modules on different breakpoints?

[mattspieg]

Is it possible to load different swiper modules on different breakpoints?
I want to use the Thumbs module but only on my desktop/tablet breakpoints (above 767px), and when we get down to mobile I want to replace the thumbs module with the Controller module. here is how i expected it to work but doesn't seem to be the case:

  var panelContSwiper = new Swiper(".admin-content-swiper", {
    slidesPerView: 1,
    allowTouchMove: true,
    spaceBetween: 10,
    centeredSlides: true,

    breakpoints: {
      // when window width is >= 767px
      767: {
        thumbs: {
          swiper: panelThumbSwiper
        },
      },
    },
          
  });

//controller module below 767 screen width
if (screen.width < 767) {
  panelContSwiper.controller.control = panelThumbSwiper;
  panelThumbSwiper.controller.control = panelContSwiper;
}

In the code example above, the Controller module only works below 767px which is what i need, now i just need to do the opposite for the Thumbs module. However, I cannot use an if statement inside the swiper variable. Any ideas?

[mattspieg]

solved: i managed to solve this in a non-ideal way by doing this:

if (screen.width < 767) {
  var panelContSwiper = new Swiper(".admin-content-swiper", {
    slidesPerView: 1,
    allowTouchMove: true,
    spaceBetween: 10,
    preloadImages: false,
    centeredSlides: true,
  });
}
if (screen.width >= 767) {
  var panelContSwiper = new Swiper(".admin-content-swiper", {
    slidesPerView: 1,
    allowTouchMove: true,
    spaceBetween: 10,
    preloadImages: false,
    centeredSlides: true,
    thumbs: {
      swiper: panelThumbSwiper
    }
  });
}
if (screen.width < 767) {
  panelContSwiper.controller.control = panelThumbSwiper;
  panelThumbSwiper.controller.control = panelContSwiper;
}

If anyone has any suggestions please leave them here!