###やりたいこと
初期状態では非表示となっており、ボタンをクリックすることで表示される領域の中にスライダー(slick.js)を設置したい。
###困っていること
最初にボタンクリックでスライダー領域を表示した時、スライダー機能自体は効いているが、画像が表示されない。(※前後移動のボタンを押す等スライダーを操作すると画像が表示され、一度表示されればその後はリロードするまでは大丈夫)
###やってみたこと
$(function(){...});内でslick()が実行される段階で画像の読み込みが終わっていないのが原因かと思い、slick()の実行を$(window).load(){...}内に移動させてみましたが結果は同じでした。
###アドバイスして欲しいこと
非表示状態になっているエリア内にあるスライダーが、最初から適用&画像表示された状態で表示/非表示切替できるようにするためには、どうしたら良いのか参考になる情報が欲しい。
過去の質門複数bxsliderをタブで切り替えたいのですが…の回答の中に**「2番目以降のタブにbxSlider を生成するには、display:none をスライダー生成後に設定するか、タブの切り替えのタイミングで生成するという方法で対処」**というヒントがあり、これが参考にならないかと思ったのですが、具体的にどう応用したら良いのか今ひとつ分からず詰まってしまいました。。。
###現状のソースコード
HTML
1<body> 2<header>ヘッダー</header> 3<main>メインコンテンツ</main> 4<footer> 5 <div class="ft-header"><a href="#">クリックで表示</a></div> 6 <!-- ここから表示/非表示切替領域 --> 7 <div class="ft-body"> 8 <!-- ここからスライダー領域 --> 9 <div id="ft-slide"> 10 <div><img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div> 11 <div><img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div> 12 <div><img src="common/img/ph_slide03_s.jpg" alt="" width="200" height="104"></div> 13 <div><img src="common/img/ph_slide04_s.jpg" alt="" width="200" height="104"></div> 14 <div><img src="common/img/ph_slide05_s.jpg" alt="" width="200" height="104"></div> 15 <div><img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div> 16 <div><img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div> 17 </div> 18 </div> 19</footer> 20</body>
CSS
1 body { 2 text-align: center; 3 } 4 header { 5 height: 100px; 6 background: #ccc; 7 } 8 main { 9 height: 2000px; 10 background: skyblue; 11 } 12 /*フッター領域は画面下部に固定(クリックで下からニュッと上がってくる)*/ 13 footer { 14 position: fixed; 15 width: 100%; 16 left: 0; 17 bottom: 0; 18 background: tomato; 19 } 20 .ft-body { 21 padding: 15px; 22 background: red; 23 } 24 .ft-header a { 25 display: block; 26 padding: 30px; 27 }
javaScript
1 $(function(){ 2 //pull up footer 3 $(".ft-header a").click(function(){ 4 $(".ft-body").slideToggle(); 5 }); 6 7 //footer-slide 8 $('#ft-slide').slick({ 9 dots: true, 10 infinite: false, 11 speed: 300, 12 slidesToShow: 5, 13 slidesToScroll: 5, 14 responsive: [ 15 { 16 breakpoint: 1024, 17 settings: { 18 slidesToShow: 4, 19 slidesToScroll: 4, 20 infinite: true, 21 dots: true 22 } 23 }, 24 { 25 breakpoint: 600, 26 settings: { 27 slidesToShow: 3, 28 slidesToScroll: 3 29 } 30 }, 31 { 32 breakpoint: 480, 33 settings: { 34 slidesToShow: 2, 35 slidesToScroll: 2 36 } 37 } 38 ] 39 }); 40 41 $(".ft-body").hide(); 42 });
初歩的なことかもしれませんが、よろしくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/26 11:35
2016/07/26 13:09 編集
2016/07/26 12:25
2016/07/26 17:44
2016/07/27 00:48
2016/07/27 02:35