Question

我尝试使用Jssor滑块根据所选类别及其子类别显示不同的HTML内容。我成功地为一个子类别创建了内容滑块，但我无法弄清楚如何销毁当前滑块并使用加载了Ajax的不同内容重新创建它。项目数在子类别中有所不同，据我了解 - 更改当前幻灯片不是一种选择。

所以，我的问题是 - 如何销毁当前的Jssor滑块并为新的滑块让路呢？

Answer 1

通过@Kai150扩展到接近......

收集原始HTML代码以构建JSSOR滑块。基本上<div id='slider1_container'>内的所有内容。如果需要，可以将初始幻灯片容器div留空，这样您就可以从头开始动态构建幻灯片：<div id ="slider1_slides" u="slides" ...></div>
消除所有标签和EOL（行尾）字符。你通常可以通过一个像样的代码编辑器来做到这一点，比如Notepad ++。（对于Notepad ++，请转到编辑 - ＆gt;空白操作 - ＆gt;删除不必要的空白和EOL。）
将此长HTML代码存储到字符串中，例如var originalHTML = '...'。小心使用单引号，并且所有原始HTML代码都使用双引号（反之亦然）。
删除旧对象：$('#slider1_container').remove();
从原始版本$('body').append(originalHTML);
根据需要进行修改。例如，要添加幻灯片：$('#slider1_container div').first().append(newSlideHTML);其中newSliderHTML是缩小的HTML代码，以构建另一张幻灯片。
初始化滑块：new $JssorSlider$('slider1_container', options);

所有这些都可以通过脚本包含在一些基本功能中。这是一些示例功能代码，使用thumbnail-5版本，您可以使用图像对象数组调用refreshSlider：

var originalHTML = '<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 456px; background: #24262e; overflow: hidden;"> <!-- Slides Container --> <div id ="slider1_slides" u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;"> </div>  <!-- Arrow Navigator Skin Begin --> <style> /* jssor slider arrow navigator skin 05 css */ /* .jssora05l              (normal) .jssora05r              (normal) .jssora05l:hover        (normal mouseover) .jssora05r:hover        (normal mouseover) .jssora05ldn            (mousedown) .jssora05rdn            (mousedown) */ .jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn { position: absolute; cursor: pointer; display: block; background: url(js/jssor/a17.png) no-repeat; overflow:hidden; } .jssora05l { background-position: -10px -40px; } .jssora05r { background-position: -70px -40px; } .jssora05l:hover { background-position: -130px -40px; } .jssora05r:hover { background-position: -190px -40px; } .jssora05ldn { background-position: -250px -40px; } .jssora05rdn { background-position: -310px -40px; } </style> <!-- Arrow Left --> <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 123px; left: 8px;"> </span> <!-- Arrow Right --> <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 123px; right: 8px"> </span> <!-- Arrow Navigator Skin End -->  <!-- Thumbnail Navigator Skin Begin --> <div u="thumbnavigator" class="jssort05" style="position: absolute; width: 600px; height: 100px; left:0px; bottom: 0px;"> <!-- Thumbnail Item Skin Begin --> <style> /* jssor slider thumbnail navigator skin 05 css */ /* .jssort05 .p           (normal) .jssort05 .p:hover     (normal mouseover) .jssort05 .pav           (active) .jssort05 .pav:hover     (active mouseover) .jssort05 .pdn           (mousedown) */ .jssort05 .f { clip: rect(8px 63px 63px 8px); } .jssort05 .i { position: absolute; background: #000; filter: alpha(opacity=30); opacity: .3; width: 72px; height: 72px; top: 0; left: 0;  transition: background-color .6s; -moz-transition: background-color .6s; -webkit-transition: background-color .6s; -o-transition: background-color .6s; } .jssort05 .pav .i { background: #fff; filter: alpha(opacity=80); opacity: .8; } .jssort05 .pdn .i { background: none; }  .jssort05 .p:hover .i, .jssort05 .pav:hover .i { background: #fff; filter: alpha(opacity=30); opacity: .3; } .jssort05 .p:hover .i { transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; } </style> <div u="slides" style="cursor: move;"> <div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;"> <div class="o" style="position:absolute;top:1px;left:1px;width:72px;height:72px;overflow:hidden;"> <ThumbnailTemplate class="b" style="width:72px;height:72px; border: none;position:absolute; TOP: 0; LEFT: 0;"></ThumbnailTemplate> <div class="i"></div> <ThumbnailTemplate class="f" style="width:72px;height:72px;border: none;position:absolute; TOP: 0; LEFT: 0;"></ThumbnailTemplate> </div> </div> </div> <!-- Thumbnail Item Skin End --> </div> <!-- Thumbnail Navigator Skin End -->   </div>';

function createSlideDeck(images) {
    $.each(images, function(i,e) {
        createSlide(e);
    });
}

function createSlide(img) {
    $div = $('<div><div>');
    $div.append($('<img u="image" src="'+img.src+'" />'))
        .append($('<img u="thumb" src="'+img.src+'" />'));
    $('#slider1_slides').append($div);
}

function refreshSlider(images) {
    $('#slider1_container').remove();
    $('body').append(originalHTML);
    createSlideDeck(images);
    jssor_slider1 = new $JssorSlider$('slider1_container', options);
}

Answer 2

请简单地移除滑块容器。

$("#slider1_container").remove();

Answer 3

我有同样的要求，经过一些头脑刮擦后才开始工作（至少符合我的要求）。

使用.remove（）方法删除选定的元素及其子元素。这删除了此元素中的所有幻灯片标记。

因此，在调用它时，我需要创建并填充基本子元素（再次）并附加到容器。 $（＆＃34;＃slider1_container＆＃34）。追加（theOriginalHtmlMarkup）

完成此操作后，我可以使用新获取的数据重新填充滑块。

Answer 4

旧滑块仍处于重影模式，并未真正删除。尚未添加destroy（）函数。滑块需要$ Pause，任何事件都要在刷新前取消绑定。

https://github.com/jssor/slider/issues/98

Jssor - unbinding the event

不要尝试 - 它很生气。我认为一切都解决了，直到我用键盘进行导航。没有破坏方法，我不建议这样做，留下未收集的垃圾。

Jssor滑块 - 如何销毁和重新创建具有不同内容的Jssor滑块

4 个答案: