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

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

ただいまの
回答率

87.37%

jQueryのslickでサムネイル付きスライダーを設置し、表示期間を指定かつ表示を個数によって変えたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,514

score 4

実現したいこと

レスポンシブでjQueryのSlickスライダーでサムネイル付スライダーを作成しています。
そこで、以下の設定を組み込みたいと思いスライダーを改良中です。

<組込みたい設定>
1.各スライド要素に表示期間を設定し、その期間のみ要素を表示させたい。
2.サムネイルのスライド要素の表示が指定した数より少ない場合、スライドさせず固定して表示したいと考えています。

発生している問題・エラーメッセージ

色々なサイトを見て、表示期間を指定するコードとサムネイルの数が少ない場合のスライド表示を切り替える方法がわかったため、組み合わせて入れてみました。

【PC表示の場合】
PC表示ではちゃんと期間指定したスライドのみ表示されますが、サムネイルの個数が少ない場合は上のスライドで表示されている画像に枠線が表示されるのに、コピーされているスライドには枠線が表示されない

【スマホ表示の場合】
・期間指定して現在表示されるスライドの数は合っていますが、上下で表示されるスライドの順番が異なります。
・スマホ表示にするとサムネイルのスライドが1つコピーされて数が少なくなると、サムネイル部分が固定となるはずなのに、左右の矢印が表示されてしまいます。。

【現在のスマホ表示】
■□
<□■>

現在入れているコードは以下の様にしています。

<!-- slider -->
<div class="slider">
<!-- ~から表示する場合(終了期間が無い場合) -->
        <div class="view_timer" data-start-date="2019/10/10 0:00"><a href="#"><img
  src="http://placehold.jp/cc0000/ffffff/750x300.png" width="100%" alt=""></a></div>
<!-- ~まで表示する(終了期間だけ決まっている場合) -->
        <div class="view_timer" data-end-date="2019/10/16 0:00"><a href="#"><img
 src="http://placehold.jp/000000/ffffff/750x300.png" width="100%" alt=""></a></div>
<!-- ~から~まで表示する(掲載開始と終了が決まっている場合) -->
        <div class="view_timer" data-start-date="2019/10/10 0:00" data-end-date="2019/12/16 0:00"><a href="#"><img

src="http://placehold.jp/cccccc/ffffff/750x300.png" width="100%" alt=""></a></div>
        <div class="view_timer" data-start-date="2019/10/4 0:00" data-end-date="2019/10/14 0:00"><a href="#"><img

src="http://placehold.jp/ccc000/ffffff/750x300.png" width="100%" alt=""></a></div>
</div>
<!-- サムネイル部分 -->
<div class="thumb">
<!-- ~から表示する場合(終了期間が無い場合) -->
        <div class="view_timer" data-start-date="2019/10/10 0:00"><img

src="http://placehold.jp/cc0000/ffffff/750x300.png" width="100%" alt=""></div>
<!-- ~まで表示する(終了期間だけ決まっている場合) -->
        <div class="view_timer" data-end-date="2019/10/16 0:00"><img

src="http://placehold.jp/000000/ffffff/750x300.png" width="100%" alt=""></div>
<!-- ~から~まで表示する(掲載開始と終了が決まっている場合) -->
        <div class="view_timer" data-start-date="2019/10/10 0:00" data-end-date="2019/12/16 0:00"><img

src="http://placehold.jp/cccccc/ffffff/750x300.png" width="100%" alt=""></div>
        <div class="view_timer" data-start-date="2019/10/4 0:00" data-end-date="2019/10/14 0:00"><img

src="http://placehold.jp/ccc000/ffffff/750x300.png" width="100%" alt=""></div>
</div>
/**----- トップ部分のスライダー -----**/
ul.slider{margin:0; padding:0; width:100%;}
/**----- サムネイル部分のスライダー -----**/
ul.thumb{margin:5px auto 40px; padding:0; width:85%;}
ul.thumb li.slick-slide{margin-right:2px;}
ul.thumb li.slick-slide:hover{cursor:pointer;}
/**----- サムネイル部分(左右の矢印) -----**/
ul.thumb .slick-prev{left:-31px!important; width:30px; height:30px; }
ul.thumb .slick-next{right:-30px!important; width:30px; height:30px; }
/**----- サムネイル部分(スライダーの数が少ない場合の処理) -----**/
ul.thumbFew .slick-current img{border: 2px solid #000000!important; width:100%; box-sizing:border-box;}
ul.thumb .none{display:none!important;}

該当のソースコード

<script type="text/javascript">
var $j = jQuery.noConflict();
// ↓スライダーの掲載期間を処理
        $j('.view_timer').each(function(index, target) {
            var startDate = $j(this).attr("data-start-date");
            var endDate = $j(this).attr("data-end-date");
            var nowDate = new Date();
            if (startDate) {
              startDate = new Date(startDate);
            } else {
              startDate = nowDate;
            }
            if (endDate) {
              endDate = new Date(endDate);
            }
            if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
              $j(this).show();
            } else {
              $j(this).hide();
            }
          });

// ↓スライダー数が少ない場合の処理
var $jslider = $j('.slider');
var slideCount = $jslider.children('div').length;
        $j('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
             if ($j(slideCount).length < 3) {
                     $j('.thumb').slick('slickSetOption', 'centerMode', false, true);
                     $j('.thumb').addClass('thumbFew');
             }
        });
// ↓スライダーの処理
$j(function() {
// スライダーバナー部分
        $j('.slider').slick({
                asNavFor:'.thumb',
                arrows:false,
                autoplay:true,
        });
// サムネイル部分
        $j('.thumb').slick({
                asNavFor:'.slider',
                focusOnSelect: true,
                slidesToShow:4,
                slidesToScroll:1,
                arrows:true,
                responsive: [
                        {
                                breakpoint: 768, // 768px以下のサイズに適用
                                        settings: {
                                        slidesToShow:2
                                        }
                                }
                        ]
        });
});
</script>

お手上げ状態なので、ご助言いただけたら幸いです。
よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

その後こちらのサイトを含め、色々なサイトを見て以下のようなコード順に記入すると、実現できました!

スマートな記述ではないと思いますが、ひとまず実現できたため解決と致します。
ご閲覧いただいた方、もしご検討中の方がおりましたら、ありがとうございました。

var $j = jQuery.noConflict(); 

// ↓スライダーの掲載期間を処理
    $j('.view_timer').each(function(index, target) {
        var startDate = $j(this).attr("data-start-date");
        var endDate = $j(this).attr("data-end-date");
        var nowDate = new Date();
        if (startDate) {
          startDate = new Date(startDate);
        } else {
          startDate = nowDate;
        }
        if (endDate) {
          endDate = new Date(endDate);
        }
        if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
          $j(this).show();
        } else {
          $j(this).remove();
        }
      });

// ↓スライダーの処理
$j(function() {
// スライダーバナー部分
    $j('.slider').slick({
        asNavFor:'.thumb', // pagerのクラス名を指定
        arrows:false,
        autoplay:true,
    });
// サムネイル部分
    $j('.thumb').slick({
        asNavFor:'.slider', // sliderのクラス名を指定
        focusOnSelect: true,
        slidesToShow:2,  // 通常のpagerの個数
        slidesToScroll:1,
        arrows:true,
        responsive: [
            {
                breakpoint: 768, // 768px以下のサイズに適用
                    settings: {
                    slidesToShow:2
                    }
                }
            ]
    }); 

// サムネイルの個数による表示切替
    $j('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        if ($j('.thumb .view_timer').length <= 2) { // 2個以下の表示なら
            $j('.thumb').addClass('thumbFew');
            $j('.thumb').slick('slickSetOption', 'centerMode', true, true);
        }
    });
});

変更した部分

・コードの記述順を1:期間指定、2:サムネイル個数で表示切替、3:slickスライダー → 1、3、2 へ変更。
・期間指定コードの最終行にある、「$j(this).hide();」で要素を隠していた処理を「$j(this).remove();」へ変更し、期間が終了すると要素を削除するようにしました。
・サムネイルのスライダーのdiv数で取得していた部分を「.view_timer」のクラス名で数を取得することへ変更。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • トップ
  • HTMLに関する質問
  • jQueryのslickでサムネイル付きスライダーを設置し、表示期間を指定かつ表示を個数によって変えたい