Jssor - how to add slides dynamically?

问题:

I have to put image loading at client side, which is basically right after browser finishes requesting a page, an ajax call is triggered to load list of images, then slides are added into sider container. Number of photos is not known after that ajax call.

I tried building html text of slides, and assign into slider container, then trigger the slider-starter. But the slider doesn't show properly.

Thanks a lot for any suggestion

回答1:

You are doing in a right way. All you need is to check slides (you added dynamically) are correct or not.

To check html created dynamically, you can copy it out and test it in a standalone html file to see if the slider works.

回答2:

I post what I did here in case it's helpful for someone:

//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');
                    }
                });