如何解决屏幕尺寸更改时如何加载和卸载滑块脚本？
我正在使用http://sachinchoolur.github.io/lightslider/中的响应滑块，该滑块实现了JS和一些CSS。很棒！
我的问题：我有3个内容框，它们在1024px屏幕宽度以上时显示为普通框-彼此相邻。到目前为止一切顺利...
我只想在屏幕尺寸为移动屏幕（小于1024像素）时启动滑块脚本，而在屏幕尺寸更大时将其卸载。但是它总是启动，并且当屏幕尺寸改变时，我也被困在卸载脚本上。
我已经尝试了几件事，但无法实现。我的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;”行-我已经尝试过卸载，销毁，伪造等等，但是当屏幕尺寸改变时我无法摆脱滑块……不确定是否同时有可能……
此处提到的滑块选项：
onSliderLoad: function (el) {},onBeforeSlide: function (el) {},onAfterSlide: function (el) {},onBeforeNextSlide: function (el) {},onBeforePrevSlide: function (el) {}
而且似乎加载事件未触发，因为我没有看到console.log ...
将感谢您的帮助！ 致谢和最诚挚的问候
解决方法
您无法卸载脚本
在加载/执行脚本时，功能定义将添加到全局窗口对象。除非您分配给变量，然后将其删除。
此外，如果您的问题是响应能力，那么还有另一种解决方案： 您可以设置多个布局。您可以根据需要添加任意多个断点。
$('#responsive').lightSlider({
item:4,loop:false,slideMove:2,easing: 'cubic-bezier(0.25,0.25,1)',speed:600,responsive : [
{
breakpoint:800,settings: {
item:3,slideMove:1,slideMargin:6,}
},{
breakpoint:480,settings: {
item:2,slideMove:1
}
}
]
});
看起来没有内置的方法可以执行此操作，但是您可以将其包装到一个小类中，只需手动将其放回原来的状态即可。在这里，使用这些按钮作为示例。
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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。