質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

5731閲覧

Slickで画像スライドの実装を行う際の対象について

asyahana

総合スコア13

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/12/12 03:02

編集2016/12/12 08:34

###前提・実現したいこと
現在、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による最新版

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/12/12 03:22

書かれている状況が再現するコード(HTML/CSS/jsなど)か、再現するURLを提示されたほうが回答を得やすいと思います。
kei344

2016/12/12 06:17

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

ベストアンサー

$('#prev').append('</div>'); というような開始/終了タグのみの追加は出来ません。

JavaScript

1$('#prev').append( 2 $( '<div/>' ).html( $( '<img/>', { 3 width: image.width, 4 height: image.height, 5 src: image.img, 6 style: 'border: solid 1px black', 7 id: "images"+value 8 } ) ) 9); 10```**動くサンプル:**[https://jsfiddle.net/jjm5nsxu/](https://jsfiddle.net/jjm5nsxu/)

投稿2016/12/12 09:30

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asyahana

2016/12/13 06:12

失礼いたしました。 上記コードに修正して動作を確認してみましたが、確かに ``` <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> ``` のような形でコードができてる事を確認出来ましたが、Slickが起動しませんでした。 (画像が縦に並ぶだけでした)
kei344

2016/12/13 06:20

$('.slider').slick();が後から追加された要素に効かない為です。 $('.slider').unslick(); // 全て一度解除する $('.slider').slick(); // もう一度設定する とかすれば出来ると思います。
asyahana

2016/12/13 06:45

解決致しました。 結果としては、 pageMax = drawImages(d.start_page, d.pages); の直下に $('.slider').slick(); を追加する事で、最後にslickを有効にするようにしました。アドバイス頂き、感謝申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問