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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4362閲覧

非表示ブロック内にスライダーを設置したい

aKusano

総合スコア3763

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/07/26 09:16

###やりたいこと
初期状態では非表示となっており、ボタンをクリックすることで表示される領域の中にスライダー(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 });

初歩的なことかもしれませんが、よろしくお願い申し上げます。

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんにちは!

クリック→表示→スライダー生成の順でも正しく表示されませんか?

HTML

1<div class="ft-header">表示</div> 2<!-- ここから表示/非表示切替領域 --> 3<div class="ft-body"> 4 <!-- ここからスライダー領域 --> 5 <div id="ft-slide"> 6 <div>いちばんめ<img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div> 7 <div>にばんめ<img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div> 8 <div>さんばんめ<img src="common/img/ph_slide03_s.jpg" alt="" width="200" height="104"></div> 9 </div> 10</div>

javascript

1<script> 2 $(function(){ 3 $(".ft-body").hide(); 4 $(".ft-header").on("click",function(){ 5 $(".ft-body").slideToggle() 6 $('#ft-slide').slick({ 7 dots: true, 8 infinite: false 9 }); 10 }); 11 }); 12</script>

===========================追記============================

CSS

1 2 footer { 3 position: fixed; 4 width: 100%; 5 margin-bottom: -200px; 6 left: 0; 7 bottom: 0; 8 background: tomato; 9 } 10 .ft-body { 11 height: 200px; 12 } 13 .ft-open { 14 height: 30px; 15 }

HTML

1<footer> 2 <div class="ft-open">上に</div> 3 <div class="ft-close" style="display:none">下に</div> 4 <!-- ここから表示/非表示切替領域 --> 5 <div class="ft-body"> 6 <!-- ここからスライダー領域 --> 7 <div id="ft-slide"> 8 <div><img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div> 9 <div><img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div> 10 <div><img src="common/img/ph_slide03_s.jpg" alt="" width="200" height="104"></div> 11 <div><img src="common/img/ph_slide04_s.jpg" alt="" width="200" height="104"></div> 12 <div><img src="common/img/ph_slide05_s.jpg" alt="" width="200" height="104"></div> 13 <div><img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div> 14 <div><img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div> 15 </div> 16 </div> 17</footer>

JavaScript

1<script> 2$(function(){ 3 $(".ft-open").click(function(){ 4 $("footer").animate({marginBottom:0}); 5 $(this).hide() 6 $(".ft-close").show() 7 }); 8 $(".ft-close").on("click",function(){ 9 $("footer").animate({marginBottom:-200}); 10 $(this).hide() 11 $(".ft-open").show() 12 }) 13 $('#ft-slide').slick({ 14 dots: true, 15 infinite: false 16 }); 17 }); 18</script>

投稿2016/07/26 10:52

編集2016/07/26 12:24
MaShiRo_H

総合スコア328

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

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

aKusano

2016/07/26 11:35

ご回答ありがとうございます。 ご教授いただいた通りに記述を変更してみました所、画像も最初から表示されるようになりました! ただ、.slideToggle()で.ft-bodyが下からニュッと出てきた時にはslick.jsが実行されていないため、縦一列に画像が並ぶ状態(すごく高さのあるフッターに鳴ってしまう)が表示された後、slick.jsが実行されてシュッと縮まるという残念な挙動になってしまいました。。。 理想としては、最初から.ft-footerの中でスライダーの状態に整えられた形のまま下からニュッと現れてくれると良いのですが、もしやslideToggle()でやっている限り難しいでしょうか…?
MaShiRo_H

2016/07/26 13:09 編集

なるほど! 肝心のfooterを無視してしまっていました><; 申し訳ないです... 下からニュッと出す動きをanimateで実現すれば、 display:noneにする必要もなく、常にsliderが下で待機した状態でslideできるのではないでしょうか^^/
MaShiRo_H

2016/07/26 12:25

回答を編集して「追記」より下に書き直しましたm(_ _)m class名やCSSも少々変更しておりますm(_ _)m
aKusano

2016/07/26 17:44

追記ありがとうございました! 試してみたところ、希望の挙動になりました!! 実際にはレスポンシブで、フッターの高さは可変になる可能性が高いですが、 その辺は動的なフッターの高さを取得して調整すれば良いので何とかなりそうです。 本当に助かりました。ありがとうございます。 ちなみにですが、$(セレクタ).click(function(){.....});と$(セレクタ).on("click", function(){....}); は何か違いがあるのでしょうか? openとcloseで使い分けされているような感じのコードとなっていたのでちょっと気になりました。 もしお時間有りましたらご教授いただけますと幸いです。
MaShiRo_H

2016/07/27 00:48

動いたようでよかったです! 私もいろいろと勉強になりましたm(_ _)m ご質問ですが、$(" ").click(function(){.....});はaKusanoさんのコードの使い回しで、$(" ").on("click", function(){....});は自身で書いた...というだけの違いですf^_^; いろいろと便利なので普段から$(" ").on("click", function(){....});を使っている癖が出てしまいました>< 惑わせてしまっていたら申し訳ないです;
aKusano

2016/07/27 02:35

なるほど、どちらも同じと考えて良いのですね。 .on()の方が色々応用効きそうな感じもしますので、ちょっと調べてみます。 この度はありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問