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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

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

CSS

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

Q&A

0回答

303閲覧

jQueryで一定の幅に来た時にslickスライダーの設定を入れ替える

masaru_666

総合スコア13

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/02/06 12:08

編集2022/01/12 10:55

jquereyで721px以上の場合と720px以下の場合のjsを読み込む設定を変えてたいのですがやり方が分からずうまくいきません。

js

1 2var windowWidth = $(window).width(); 3var windowSm = 720; 4if (windowWidth <= windowSm) { 5 $('.thumb-item').slick({ 6 asNavFor:'.thumb-item-nav', 7 arrows: false, 8 slidesToShow:1, 9 }); 10 $('.thumb-item-nav').slick({ 11 asNavFor:'.thumb-item', 12 focusOnSelect: true, 13 arrows: false, 14 slidesToShow:5, 15 }); 16} else { 17 $(function(){ 18 var slider = "#slider"; 19 var thumbnailItem = "#thumbnail-list .thumbnail-item"; 20 21 $(thumbnailItem).each(function(){ 22 var index = $(thumbnailItem).index(this); 23 $(this).attr("data-index",index); 24 }); 25 26 27 $(slider).on('init',function(slick){ 28 var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index"); 29 $(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current"); 30 }); 31 32 $(slider).slick({ 33 autoplay: false, 34 arrows: false, 35 fade: true, 36 infinite: false 37 }); 38 $(thumbnailItem).on('click',function(){ 39 var index = $(this).attr("data-index"); 40 $(slider).slick("slickGoTo",index,false); 41 }); 42 43 $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){ 44 $(thumbnailItem).each(function(){ 45 $(this).removeClass("thumbnail-current"); 46 }); 47 $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current"); 48 }); 49}); 50 51$(function(){ 52var luminousTrigger = document.querySelectorAll('.luminous'); 53new LuminousGallery(luminousTrigger); 54}); 55 } 56 57}; 58} 59 60

720px以下の場合は(モバイル)

js

1$('.thumb-item').slick({ 2 asNavFor:'.thumb-item-nav', 3 arrows: false, 4 slidesToShow:1, 5 }); 6 $('.thumb-item-nav').slick({ 7 asNavFor:'.thumb-item', 8 focusOnSelect: true, 9 arrows: false, 10 slidesToShow:5, 11 });

の設定にして
721以上の場合は(pc)

js

1$(function(){ 2 var slider = "#slider"; 3 var thumbnailItem = "#thumbnail-list .thumbnail-item"; 4 5 $(thumbnailItem).each(function(){ 6 var index = $(thumbnailItem).index(this); 7 $(this).attr("data-index",index); 8 }); 9 10 11 $(slider).on('init',function(slick){ 12 var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index"); 13 $(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current"); 14 }); 15 16 $(slider).slick({ 17 autoplay: false, 18 arrows: false, 19 fade: true, 20 infinite: false 21 }); 22 $(thumbnailItem).on('click',function(){ 23 var index = $(this).attr("data-index"); 24 $(slider).slick("slickGoTo",index,false); 25 }); 26 27 $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){ 28 $(thumbnailItem).each(function(){ 29 $(this).removeClass("thumbnail-current"); 30 }); 31 $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current"); 32 }); 33}); 34 35$(function(){ 36var luminousTrigger = document.querySelectorAll('.luminous'); 37new LuminousGallery(luminousTrigger); 38});

調べた結果一番上のような記述が出てきましたがうまくいきませんでした。
PCサイズの場合はスライダーのメイン画像をクリックすると拡大するような設定し、モバイルの場合はスライダーのみの設定にしたく考えております。

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

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

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

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

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

Lhankor_Mhy

2019/02/07 00:22

「うまくいきませんでした」とは具体的には何が起きましたか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問