###前提・実現したいこと
現在、Slickを使って画像スライドの実装を行おうとしています。
その際に、画像を指定するタグをjQueryのappendで動的に生成しているのですが、その場合だとHTMLソース上にそれらのタグが見られず(デベロッパーツールで見ても見えない)、Slickが機能しません。
動的に生成したタグに対し、Slickを適用する方法はあるのでしょうか?
【追記】申し訳ありません、Slickの間違いでした。お詫び申し上げます。
下記にサンプルコードを掲載します。ページ読み込み時でgetImages(),drawImages(image)関数が走り、処理終了時には画像表示エリアである
<div id="sample" class="slider"></div>
の中に対し、下記のように
<div id="sample" class="slider"> <div><img data:image/png;base64,xxx1></img></div> <div><img data:image/png;base64,xxx2></img></div> <div><img data:image/png;base64,xxx3></img></div> <div><img data:image/png;base64,xxx4></img></div> <div><img data:image/png;base64,xxx5></img></div> </div>
というコードが追加されていると思われますが、実際のソースでは
<div id="sample" class="slider"></div>
のみでした。このため、Slickが機能しません。
###試したこと
静的な画像ファイルやコードに対しては実行されていました。
###ソースコード(サンプル)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta> <meta name="description" content=""></meta> <meta name="author" content=""></meta> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> </head> <body> <div id="sample" class="slider"></div> <script type="text/javascript"> //この関数でAPI通信を行い、画像データをJSON文字列形式で取得。 $(function getImages() { var pageNo = 0; var pageMax = 0; $('#sample').html(""); var jqxhr; jqxhr = $.ajax({ type: "post", url: "../../../api/pageimage", data: JSON.stringify("") , contentType: "application/json", dataType: "json", timeout: 100000, }).done(function(d) { $('#prev').html(""); if(d.pages!=0){ pageMax = drawImages(d.start_page, d.pages); } }) }); //この関数で各々のデータを整形 //(<div><img data:image/png;base64,xxx></img></div>の形で画像を動的に生成) function drawImages(first_page, images) { var value=0; $('#prev').html(""); images.forEach (function(image) { $('#prev').append('<div>'); $('#prev').append( $('<img/>', { width: image.width, height: image.height, src: image.img, style: "border: solid 1px black", id: "images"+value }) ); $('#prev').append('</div>'); value++; }); } </script> <script type="text/javascript"> $('.slider').slick(); </script> </body> </html>
###補足情報(言語/FW/ツール等のバージョンなど)
HTML:HTML5
jQuery:Ver.3.1.0
Slick:CDNによる最新版
回答1件
あなたの回答
tips
プレビュー