jssor - Jssor - スライドを動的に追加する方法は?

Question

クライアント側で画像の読み込みを行う必要があります。これは基本的に、ブラウザーがページの要求を終了した直後であり、画像のリストを読み込むために ajax 呼び出しがトリガーされ、スライドが sider コンテナーに追加されます。その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 ファイルでテストし、スライダーが機能するかどうかを確認します。