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

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

ただいまの
回答率

87.90%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,240

score 3725

やりたいこと

初期状態では非表示となっており、ボタンをクリックすることで表示される領域の中にスライダー(slick.js)を設置したい。

困っていること

最初にボタンクリックでスライダー領域を表示した時、スライダー機能自体は効いているが、画像が表示されない。(※前後移動のボタンを押す等スライダーを操作すると画像が表示され、一度表示されればその後はリロードするまでは大丈夫)

やってみたこと

$(function(){...});内でslick()が実行される段階で画像の読み込みが終わっていないのが原因かと思い、slick()の実行を$(window).load(){...}内に移動させてみましたが結果は同じでした。

アドバイスして欲しいこと

非表示状態になっているエリア内にあるスライダーが、最初から適用&画像表示された状態で表示/非表示切替できるようにするためには、どうしたら良いのか参考になる情報が欲しい。

過去の質門複数bxsliderをタブで切り替えたいのですが…の回答の中に「2番目以降のタブにbxSlider を生成するには、display:none をスライダー生成後に設定するか、タブの切り替えのタイミングで生成するという方法で対処」というヒントがあり、これが参考にならないかと思ったのですが、具体的にどう応用したら良いのか今ひとつ分からず詰まってしまいました。。。

現状のソースコード

<body>
<header>ヘッダー</header>
<main>メインコンテンツ</main>
<footer>
    <div class="ft-header"><a href="#">クリックで表示</a></div>
    <!-- ここから表示/非表示切替領域 -->
    <div class="ft-body">
        <!-- ここからスライダー領域 -->
        <div id="ft-slide">
            <div><img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide03_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide04_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide05_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div>
        </div>
    </div>
</footer>
</body>
body {
        text-align: center;
    }
    header {
        height: 100px;
        background: #ccc;
    }
    main {
        height: 2000px;
        background: skyblue;
    }
    /*フッター領域は画面下部に固定(クリックで下からニュッと上がってくる)*/
    footer {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        background: tomato;
    }
    .ft-body {
        padding: 15px;
        background: red;
    }
    .ft-header a {
        display: block;
        padding: 30px;
    }
$(function(){
        //pull up footer
        $(".ft-header a").click(function(){
            $(".ft-body").slideToggle();
        });

        //footer-slide
        $('#ft-slide').slick({
          dots: true,
          infinite: false,
          speed: 300,
          slidesToShow: 5,
          slidesToScroll: 5,
          responsive: [
            {
              breakpoint: 1024,
              settings: {
                slidesToShow: 4,
                slidesToScroll: 4,
                infinite: true,
                dots: true
              }
            },
            {
              breakpoint: 600,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 3
              }
            },
            {
              breakpoint: 480,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 2
              }
            }
          ]
        });

        $(".ft-body").hide();
    });

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

こんにちは!

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

<div class="ft-header">表示</div>
<!-- ここから表示/非表示切替領域 -->
<div class="ft-body">
    <!-- ここからスライダー領域 -->
    <div id="ft-slide">
        <div>いちばんめ<img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div>
        <div>にばんめ<img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div>
        <div>さんばんめ<img src="common/img/ph_slide03_s.jpg" alt="" width="200" height="104"></div>
    </div>
</div>
<script>
    $(function(){
        $(".ft-body").hide();
        $(".ft-header").on("click",function(){
              $(".ft-body").slideToggle()
              $('#ft-slide').slick({
                dots: true,
                infinite: false
              });
        });
    });
</script>

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

footer {
        position: fixed;
        width: 100%;
        margin-bottom: -200px;
        left: 0;
        bottom: 0;
        background: tomato;
    }
    .ft-body {
        height: 200px;
    }
    .ft-open {
        height: 30px;
    }
<footer>
    <div class="ft-open">上に</div>
    <div class="ft-close" style="display:none">下に</div>
    <!-- ここから表示/非表示切替領域 -->
    <div class="ft-body">
        <!-- ここからスライダー領域 -->
        <div id="ft-slide">
            <div><img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide03_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide04_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide05_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div>
            <div><img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div>
        </div>
    </div>
</footer>
<script>
$(function(){
        $(".ft-open").click(function(){
            $("footer").animate({marginBottom:0});
            $(this).hide()
            $(".ft-close").show()
        });
        $(".ft-close").on("click",function(){
            $("footer").animate({marginBottom:-200});
            $(this).hide()
            $(".ft-open").show()
        })
        $('#ft-slide').slick({
          dots: true,
          infinite: false
        });
    });
</script>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/27 02:44

    追記ありがとうございました!
    試してみたところ、希望の挙動になりました!!
    実際にはレスポンシブで、フッターの高さは可変になる可能性が高いですが、
    その辺は動的なフッターの高さを取得して調整すれば良いので何とかなりそうです。
    本当に助かりました。ありがとうございます。

    ちなみにですが、$(セレクタ).click(function(){.....});と$(セレクタ).on("click", function(){....}); は何か違いがあるのでしょうか? openとcloseで使い分けされているような感じのコードとなっていたのでちょっと気になりました。
    もしお時間有りましたらご教授いただけますと幸いです。

    キャンセル

  • 2016/07/27 09:48

    動いたようでよかったです!
    私もいろいろと勉強になりましたm(_ _)m

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

    キャンセル

  • 2016/07/27 11:35

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

    キャンセル

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

  • ただいまの回答率 87.90%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る