Question

我正在使用Swiper滑块，并且想在桌面上禁用它，因此界面看起来有些不同。

我实现此目标的方法是创建一个onload事件侦听器，并检查屏幕尺寸以创建新的Swiper元素。

window.addEventListener("load", toggleSlider);
function toggleSlider() {
  var w = window.innerWidth;
  var container = document.getElementsByClassName("swiper-container");
  if ( w < 768 ) {
    var mySwiper = new Swiper(container, {
      // Optional parameters

我想完成的是能够在Windows调整大小时切换此功能，而不必重新加载页面。像这样：

 if ( w < 768 ) {
    var mySwiper = new Swiper(...
 }else{
  delete Swiper
 }

我尝试删除对象Swiper，因为该代码创建了new Swiper()，但是没有用。

关于如何实现它的任何想法？

Answer 1

选择DOM元素，然后销毁它。

e.g const mySwiepr = document...select it as you wish.

mySwiper.destroy(deleteInstance, cleanStyles);

销毁滑块实例并分离所有事件侦听器，其中：

deleteInstance-布尔值-将其设置为false（默认情况下为true），以不删除Swiper实例

cleanStyles-布尔值-将其设置为true（默认情况下为true），所有自定义样式将从幻灯片，包装器和容器中删除。如果您需要销毁Swiper并使用新选项或朝另一个方向重新初始化，则很有用

您还需要一个。（'resize'）处理函数进行检查

if (condition) {select carousel then mySwiper.destroy()}

doc reference

在窗口调整大小时禁用/启用滑块功能

1 个答案: