JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法
外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描写し、それらに対して「slick」プラグインでスライダーを実行したかった。また、それとは別に先にスライダーが実行されているページに対して動的に画像を追加したかった。以下に対応方法をメモ。
slick
公式サイト
https://kenwheeler.github.io/slick/
CDN
CDNで使う場合は以下を記述する。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
対応方法
空の要素に対して画像を追加してスライダー実行する場合
<div id="slider"></div> <script> $(function(){ //#slider内に画像を追加 for( let i = 1; i <= 5; i++ ){ $(`#slider`).append(`<div><img src="./img/00${i}.jpg"></div>`); } //slick実行 $(`#slider`).slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, centerMode: true, variableWidth: true }); }); </script>
既に実行されているスライダーに対して画像を追加する場合
<div id="slider"> <div><img src="./img/001.jpg"></div> <div><img src="./img/002.jpg"></div> <div><img src="./img/003.jpg"></div> </div> <script> $(function(){ const slickFunc = () => { $(`#slider`).slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, centerMode: true, variableWidth: true }); } slickFunc(); //slick解除 $('#slider').slick('unslick'); //#slider内に画像を追加 for( let i = 4; i <= 5; i++ ){ $(`#slider`).append(`<div><img src="./img/00${i}.jpg"></div>`); } //slick実行 slickFunc(); }); </script>
解説等
空の要素に対して画像を追加してスライダー実行する場合は特に注意点は無く、普通に画像を追加してslickを起動すれば良い。
既に実行されているスライダーに対して画像を追加する場合は一旦スライダーを解除してから画像を追加し、改めてslickを起動させる必要がある点に注意する。
関連記事
-
-
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)
画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...
-
-
jquery.snipeの使い方
使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...
-
-
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法
画像を遅延ロードさせたい時にはjQueryプラグインのlazyloadが便利。以 ...