Question

当用户使用AJAX请求将图像上传到服务器时，我正在使用jssor制作幻灯片，其中<ul>个<img>标签动态加载。

当用户想要删除一些图像时。我可以这样做，但在幻灯片中它显示一个空框，其中删除的图像是。

如何更新或其他选项以保持动态删除图像？

以下是我创建幻灯片并删除某些项目的代码：

var i = 0;

for(; i < data.Paths.length; i++) {
    $('#slides').append($("<div id='div_" + i + "''><img u='images' style='width: 225px; height: 150px;' src='"+data.Paths[i]+"' id='img_" + i + "''></div>"));
}

var options = {
    $ArrowNavigatorOptions: {
        $Class: $JssorArrowNavigator$,
        $ChanceToShow: 2
    }
};

jssor_slider1 = new $JssorSlider$('slider1_container', options);

$(document).on('click', '#delete_photo', function(){
    //Check the data of this button, because we gonna make the button next or previous load the id of the picture inside
    //console.log(jssor_slider1.$CurrentIndex()); //Return current index of the element inside the slider.
    var selected_index = jssor_slider1.$CurrentIndex();
    var element = "#div_" + selected_index;
    console.log(element);
    $(element).remove();

    var options = {
        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,
            $ChanceToShow: 2
        }
    };

    jssor_slider1 = null;
    jssor_slider1 = new $JssorSlider$('slider1_container', options);
});

Answer 1

jssor滑块以一定数量的幻灯片运行。如果使用5张幻灯片初始化滑块，则无法删除或添加任何幻灯片。

但允许动态更改每张幻灯片的内容。

Answer 2

给定一个滑块用4张幻灯片初始化，如下所示，

<div id="slide1">slide 1 content</div>
<div id="slide2">slide 2 content</div>
<div id="slide3">slide 3 content</div>
<div id="slide4">slide 4 content</div>

要重新制作滑块，您只需要清除每张幻灯片中的内容，然后在每张幻灯片中添加新的内容。

//do something
$(#slide1).html("new conent for slide 1");

图像幻灯片显示删除动态删除

2 个答案: