Swiper Slider - 仅在移动设备上显示答案

【问题标题】：Swiper Slider - Only show on mobileSwiper Slider - 仅在移动设备上显示
【发布时间】：2022-06-15 00:27:33
【问题描述】：

如果屏幕小于 768 像素，我正在编写初始化/调整 Swiper Slider 大小的代码，如果大于 768 像素则销毁。

此代码正在运行，但是当浏览器重新启动时，宽度：768px 出现错误消息：

未捕获的类型错误：swiper.destroy 不是函数在 swiperMode (home.js:1:817) 在 home.js:1:878

    /* Swiper Slider Cards Home - Show only on mobile */
    var swiper = Swiper;
    var init = false;
    function swiperMode() {
      let mobile = window.matchMedia("(min-width: 0px) and (max-width: 768px)");

      if (mobile.matches) {
        if (!init) {
          init = true;
          swiper = new Swiper(".slider-cards-js", {
            direction: "horizontal",
            slidesPerView: "auto",
            centeredSlides: true,
            spaceBetween: 32,
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
          });
        }
      } else {
        swiper.destroy();
        init = false;
      }
    }

    window.addEventListener("load", function () {
      swiperMode();
    });

    window.addEventListener("resize", function () {
      swiperMode();
    });

【问题讨论】：

标签： javascript swiper swiper.js

【解决方案1】：

解决方案：

function swiperCard() {
  if (window.innerWidth <= 768) {
    if (!init) {
      init = true;
      swiper = new Swiper(".slider-cards-js", {
        direction: "horizontal",
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 32,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    }
  } else if (init) {
    swiper.destroy();
    init = false;
  }
}
swiperCard();
window.addEventListener("resize", swiperCard);

将 .slider-cards-js 更改为您的 swiper 主 div。

【讨论】：