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

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

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

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

1689閲覧

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

yuky2019

総合スコア4

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/10/08 15:13

編集2019/10/08 15:15

実現したいこと

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

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

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

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

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

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

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

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

HTML

1<!-- slider --> 2<div class="slider"> 3<!-- ~から表示する場合(終了期間が無い場合) --> 4 <div class="view_timer" data-start-date="2019/10/10 0:00"><a href="#"><img 5 src="http://placehold.jp/cc0000/ffffff/750x300.png" width="100%" alt=""></a></div> 6<!-- ~まで表示する(終了期間だけ決まっている場合) --> 7 <div class="view_timer" data-end-date="2019/10/16 0:00"><a href="#"><img 8 src="http://placehold.jp/000000/ffffff/750x300.png" width="100%" alt=""></a></div> 9<!-- ~から~まで表示する(掲載開始と終了が決まっている場合) --> 10 <div class="view_timer" data-start-date="2019/10/10 0:00" data-end-date="2019/12/16 0:00"><a href="#"><img 11 12src="http://placehold.jp/cccccc/ffffff/750x300.png" width="100%" alt=""></a></div> 13 <div class="view_timer" data-start-date="2019/10/4 0:00" data-end-date="2019/10/14 0:00"><a href="#"><img 14 15src="http://placehold.jp/ccc000/ffffff/750x300.png" width="100%" alt=""></a></div> 16</div> 17<!-- サムネイル部分 --> 18<div class="thumb"> 19<!-- ~から表示する場合(終了期間が無い場合) --> 20 <div class="view_timer" data-start-date="2019/10/10 0:00"><img 21 22src="http://placehold.jp/cc0000/ffffff/750x300.png" width="100%" alt=""></div> 23<!-- ~まで表示する(終了期間だけ決まっている場合) --> 24 <div class="view_timer" data-end-date="2019/10/16 0:00"><img 25 26src="http://placehold.jp/000000/ffffff/750x300.png" width="100%" alt=""></div> 27<!-- ~から~まで表示する(掲載開始と終了が決まっている場合) --> 28 <div class="view_timer" data-start-date="2019/10/10 0:00" data-end-date="2019/12/16 0:00"><img 29 30src="http://placehold.jp/cccccc/ffffff/750x300.png" width="100%" alt=""></div> 31 <div class="view_timer" data-start-date="2019/10/4 0:00" data-end-date="2019/10/14 0:00"><img 32 33src="http://placehold.jp/ccc000/ffffff/750x300.png" width="100%" alt=""></div> 34</div>

CSS

1/**----- トップ部分のスライダー -----**/ 2ul.slider{margin:0; padding:0; width:100%;} 3/**----- サムネイル部分のスライダー -----**/ 4ul.thumb{margin:5px auto 40px; padding:0; width:85%;} 5ul.thumb li.slick-slide{margin-right:2px;} 6ul.thumb li.slick-slide:hover{cursor:pointer;} 7/**----- サムネイル部分(左右の矢印) -----**/ 8ul.thumb .slick-prev{left:-31px!important; width:30px; height:30px; } 9ul.thumb .slick-next{right:-30px!important; width:30px; height:30px; } 10/**----- サムネイル部分(スライダーの数が少ない場合の処理) -----**/ 11ul.thumbFew .slick-current img{border: 2px solid #000000!important; width:100%; box-sizing:border-box;} 12ul.thumb .none{display:none!important;}

該当のソースコード

jQuery

1<script type="text/javascript"> 2var $j = jQuery.noConflict(); 3// ↓スライダーの掲載期間を処理 4 $j('.view_timer').each(function(index, target) { 5 var startDate = $j(this).attr("data-start-date"); 6 var endDate = $j(this).attr("data-end-date"); 7 var nowDate = new Date(); 8 if (startDate) { 9 startDate = new Date(startDate); 10 } else { 11 startDate = nowDate; 12 } 13 if (endDate) { 14 endDate = new Date(endDate); 15 } 16 if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { 17 $j(this).show(); 18 } else { 19 $j(this).hide(); 20 } 21 }); 22 23// ↓スライダー数が少ない場合の処理 24var $jslider = $j('.slider'); 25var slideCount = $jslider.children('div').length; 26 $j('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 27 if ($j(slideCount).length < 3) { 28 $j('.thumb').slick('slickSetOption', 'centerMode', false, true); 29 $j('.thumb').addClass('thumbFew'); 30 } 31 }); 32// ↓スライダーの処理 33$j(function() { 34// スライダーバナー部分 35 $j('.slider').slick({ 36 asNavFor:'.thumb', 37 arrows:false, 38 autoplay:true, 39 }); 40// サムネイル部分 41 $j('.thumb').slick({ 42 asNavFor:'.slider', 43 focusOnSelect: true, 44 slidesToShow:4, 45 slidesToScroll:1, 46 arrows:true, 47 responsive: [ 48 { 49 breakpoint: 768, // 768px以下のサイズに適用 50 settings: { 51 slidesToShow:2 52 } 53 } 54 ] 55 }); 56}); 57</script>

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

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

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

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

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

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

guest

回答1

0

自己解決

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

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

jQuery

1var $j = jQuery.noConflict(); 2 3// ↓スライダーの掲載期間を処理 4 $j('.view_timer').each(function(index, target) { 5 var startDate = $j(this).attr("data-start-date"); 6 var endDate = $j(this).attr("data-end-date"); 7 var nowDate = new Date(); 8 if (startDate) { 9 startDate = new Date(startDate); 10 } else { 11 startDate = nowDate; 12 } 13 if (endDate) { 14 endDate = new Date(endDate); 15 } 16 if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { 17 $j(this).show(); 18 } else { 19 $j(this).remove(); 20 } 21 }); 22 23// ↓スライダーの処理 24$j(function() { 25// スライダーバナー部分 26 $j('.slider').slick({ 27 asNavFor:'.thumb', // pagerのクラス名を指定 28 arrows:false, 29 autoplay:true, 30 }); 31// サムネイル部分 32 $j('.thumb').slick({ 33 asNavFor:'.slider', // sliderのクラス名を指定 34 focusOnSelect: true, 35 slidesToShow:2, // 通常のpagerの個数 36 slidesToScroll:1, 37 arrows:true, 38 responsive: [ 39 { 40 breakpoint: 768, // 768px以下のサイズに適用 41 settings: { 42 slidesToShow:2 43 } 44 } 45 ] 46 }); 47 48// サムネイルの個数による表示切替 49 $j('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 50 if ($j('.thumb .view_timer').length <= 2) { // 2個以下の表示なら 51 $j('.thumb').addClass('thumbFew'); 52 $j('.thumb').slick('slickSetOption', 'centerMode', true, true); 53 } 54 }); 55});

変更した部分

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

投稿2019/10/11 03:10

yuky2019

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問