当屏幕大小发生变化时，如何加载和卸载滑块脚本

Question

我使用的是http://sachinchoolur.github.io/lightslider/，实现了JS，以及一些CSS。效果很好！

我的问题：我有3个内容框，当屏幕宽度超过1024px时，它们显示为正常框，相邻。到目前为止还不错。。。

我只想在屏幕大小为1024px以下的移动屏幕时启动滑块脚本，并在屏幕大小变大时卸载它。但它总是启动，当屏幕大小发生变化时，我也会忙于卸载脚本

我尝试了好几件事，但都没能实现。我的JS不是最好的tbh。。。

我当前的脚本如下：

<script>
jQuery(document).ready(function() {
jQuery("#content-slider").lightSlider({
loop:true,
keyPress:true,
item: 1,
enableTouch:true,
enableDrag:true,
freeMove:true,
swipeThreshold: 40, 
onSliderLoad: function ($el) {
jQuery(window).on('load', function () {
var windowSize = jQuery(window).width();
if(windowSize <= 1024){     
console.log("kleiner 1024");
} else if (windowSize > 1024) { 
console.log("größer 1024");                                     
$el.lightSlider = null;
return false;
}
});
jQuery(window).on('resize', function () {
var windowSize = jQuery(window).width();
if(windowSize <= 1024){     
console.log("kleiner 1024");
} else if (windowSize > 1024) { 
console.log("größer 1024");                                     
$el.lightSlider = null;
return false;
}
});                             
}
});     
}); 
</script>

滑块有几个选项可供设置；播放设置"；部分我认为使用"；onSliderLoad"；功能，然后检查屏幕大小。在我的剧本中$el.lightSlider=null"-我试过卸载、销毁、false等等，但当屏幕大小改变时，我无法摆脱滑块。。。不确定这是否可能。。。

滑块选项，如这里提到的：

onSliderLoad: function (el) {},
onBeforeSlide: function (el) {},
onAfterSlide: function (el) {},
onBeforeNextSlide: function (el) {},
onBeforePrevSlide: function (el) {}

此外，加载事件似乎没有被触发，因为我没有看到我的控制台.log…

非常感谢您的帮助！Thx&向致以最良好的问候

Answer 1

您无法卸载脚本

加载/执行脚本时，函数定义会添加到全局窗口对象中。除非你分配给一个变量，然后删除它。

此外，如果响应能力是您的问题，还有另一种解决方案：可以设置多个布局。您可以添加任意数量的断点。

$('#responsive').lightSlider({
item:4,
loop:false,
slideMove:2,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:800,
settings: {
item:3,
slideMove:1,
slideMargin:6,
}
},
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
});  

Answer 2

看起来没有内置的方法来实现这一点，但您可以将其封装在一个小类中，只需手动将其恢复到原来的状态。

class LSWrapper {
constructor() {
this.markup = $('#lightSlider').parent().html();
this.isInit = false;
}
init() {
if (this.isInit) return false;
this.isInit = true;
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 9
});
}
destroy() {
if (!this.isInit) return false;
this.isInit = false;
$('#lightSlider').parent().html(this.markup);
$(".lSGallery").remove();
}
}
var slideshow = new LSWrapper();
document.getElementById('init').onclick = () => slideshow.init();
document.getElementById('destroy').onclick = () => slideshow.destroy();

.demo {
width: 420px;
}
ul {
list-style: none outside none;
padding-left: 0;
margin-bottom: 0;
}
li {
display: block;
float: left;
margin-right: 6px;
cursor: pointer;
}
img {
display: block;
height: auto;
max-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" />
<button id=init>Create</button>
<button id=destroy>Destroy</button>

<div class="demo">
<ul id="lightSlider">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
</li>
</ul>
</div>