jssor - Jssor - 如何动态添加幻灯片？

Question

我必须将图像加载放在客户端，这基本上是在浏览器完成请求页面之后，触发 ajax 调用以加载图像列表，然后将幻灯片添加到边容器中。在那个 ajax 调用之后，照片的数量是未知的。

我尝试构建幻灯片的 html 文本，并分配到滑块容器中，然后触发滑块启动器。但滑块显示不正确。

非常感谢任何建议

Answer 1

我在这里发布我所做的，以防它对某人有帮助：

//function to start the slider    
jssor_slider1_starter = function (containerId) {
                    var options = {
                        $AutoPlay: false,
                        $SlideDuration: 800,
                        $FillMode: 2,
                        $ThumbnailNavigatorOptions: {
                            $Class: $JssorThumbnailNavigator$,
                            $ChanceToShow: 2,

                            $Lanes: 1,
                            $SpacingX: 14,
                            $SpacingY: 12,
                            $Cols: 6,
                            $Align: 156,
                            $Orientation: 2
                        }
                    };

                    var jssor_slider1 = new $JssorSlider$(containerId, options);
                };
//Ajax function to start the slider after loading the 'content' of slider
//getImgUrl is the url of page returning urls of images contained in slider. Format of response can be whatever as long as you can parse it, my sample is [[[url1,url2..]]]   
 $.ajax({
                    url:getImgUrl,
                    success:function(data){
                        var imgurls_str=data.substring(data.indexOf('[[[')+3,data.indexOf(']]]'));
                        var imgurls=imgurls_str.split(',');
                        var imgHtmls='';
                        for(var i=0;i<imgurls.length;++i){
                            imgHtmls+='<div><img u="image" src="'+imgurls[i]+'" /><img u="thumb" src="'+imgurls[i]+'" /></div>';
                        }
                        $("#slides").html(imgHtmls);
                        jssor_slider1_starter('slider1_container');
                    }
                });

Answer 2

你正在以正确的方式做事。您只需要检查幻灯片（动态添加）是否正确。

要检查动态创建的 html，您可以将其复制出来并在独立的 html 文件中进行测试，以查看滑块是否有效。