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

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

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

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

JavaScript

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

jQuery

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

HTML

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

CSS

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

解決済

Slick.jsにて写真が2枚表示されるようにレスポンシブをしたいが、表示されない。

TMTN
TMTN

総合スコア0

jQueryプラグイン

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

JavaScript

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

jQuery

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

HTML

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

CSS

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

1回答

0評価

1クリップ

410閲覧

投稿2021/02/21 08:12

編集2022/01/12 10:58

前提・実現したいこと

Slick.jsにタブレット用で「breakpoint: 1024」を設けて、
写真が2枚表示されるようにレスポンシブをしたいのですが、表示がされなく困っています。
試しに1枚と3枚で表示させるように指定するときちんと表示されます。

試行錯誤して調べてみましたが原因がわかりません。
わかる方ご教示いただけませんでしょうか。

該当のソースコード

HTML

<h2 class="works-title fade-in-bottom flex font-title animate" id="works">WORKS</h2> <div class="works-inner flex"> <div class="works-inner-items flex"> <div class="slider-works flex"> <div><img src="img/難波.jpg" alt="難波" /></div> <div><img src="img/渋谷.jpg" alt="渋谷" /></div> <div><img src="img/横浜.jpg" alt="横浜" /></div> <div><img src="img/東山.jpg" alt="東山" /></div> <div><img src="img/博多.jpg" alt="博多" /></div> <div><img src="img/花園.jpg" alt="花園" /></div> <div><img src="img/祇園.jpg" alt="祇園" /></div> <div><img src="img/吉祥寺.jpg" alt="吉祥寺" /></div> <div><img src="img/秋葉原.jpg" alt="秋葉原" /></div> <div><img src="img/新宿.jpg" alt="新宿" /></div> <div><img src="img/川越.jpg" alt="川越" /></div> <div><img src="img/池袋.jpg" alt="池袋" /></div> <div><img src="img/天王寺.jpg" alt="天王寺" /></div> <div><img src="img/梅田.jpg" alt="梅田" /></div> <div><img src="img/伏見稲荷.jpg" alt="伏見稲荷" /></div> </div> <div class="work-font font-title"> - List of works - <a href="works.html"><i class="work-arrow fas fa-chevron-right"></i></a> </div> </div> </div> <h2 class="blog-title fade-in-bottom flex font-title animate" id="blog"> BLOG </h2> <div class="blog-inner flex"> <div class="blog-inner-items flex"> <div class="slider-blog flex"> <div class="blog-article flex"> <a href="article_1.html"><img src="img/記事1.jpg" alt="見やすいサイト条件" /></a> <h3 class="articles-title flex">見やすいサイト条件</h3> <div class="articles-time flex">2021/02/10 14:10</div> </div> <div class="blog-article flex"> <a href="article_2.html"><img src="img/記事2.jpg" alt="最近いいなと思ったサイト" /></a> <h3 class="articles-title flex">最近いいなと思ったサイト</h3> <div class="articles-time flex">2021/02/11 18:20</div> </div> <div class="blog-article flex"> <a href="article_3.html"><img src="img/記事3.jpg" alt="カメラの選び方" /></a> <h3 class="articles-title flex">カメラの選び方</h3> <div class="articles-time flex">2021/02/13 18:10</div> </div> </div> <div class="blog-font font-title"> - BLOG一覧 - <a href="blog.html"><i class="blog-arrow fas fa-chevron-right"></i></a> </div> </div> </div>

CSS

/* <====== works ======> */ h2#works { padding-top: 12rem; margin-top: -8rem; } .works-inner { width: 100%; height: 45rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 5rem; } .works-inner .works-inner-items { width: 90%; height: 40rem; margin-top: 8rem; position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .works-inner .works-inner-items::after { width: 100%; height: 40rem; content: ""; position: absolute; left: 0rem; top: 1rem; -webkit-transform: skewY(-5deg); transform: skewY(-5deg); z-index: -1; -webkit-transform-origin: bottom left; transform-origin: bottom left; background: black; } .works-inner .works-inner-items .slider-works div img { margin: 0 auto; } .works-inner .works-inner-items .work-font { font-size: 1.5rem; color: white; } .works-inner .works-inner-items .work-font a i { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 2rem; } .works-inner .works-inner-items .work-font i:hover { -webkit-transform: translateX(20px); transform: translateX(20px); } .works-inner .works-inner-items .work-font .work-arrow { color: white; padding: 1rem; } /* <====== blog ======> */ h2#blog { padding-top: 12rem; margin-top: -8rem; } .blog-inner { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .blog-inner .blog-inner-items { width: 100%; margin-top: 8rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .blog-inner .blog-inner-items .slider-blog .blog-article { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 1rem; } .blog-inner .blog-inner-items .slider-blog .blog-article a img { width: 350px; height: 220px; margin: 0 auto; } .blog-inner .blog-inner-items .slider-blog .blog-article .articles-title { font-size: 1rem; padding: 1rem; margin: 0 auto; } .blog-inner .blog-inner-items .slider-blog .blog-article .articles-time { font-size: 0.8rem; margin: 0 auto; } .blog-inner .blog-inner-items .blog-font { margin-top: 4rem; font-size: 1.5rem; color: black; } .blog-inner .blog-inner-items .blog-font a i { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 2rem; } .blog-inner .blog-inner-items .blog-font i:hover { -webkit-transform: translateX(20px); transform: translateX(20px); } .blog-inner .blog-inner-items .blog-font .blog-arrow { color: black; padding: 1rem; } /* <====== slick-works ======> */ .works-inner .works-inner-items .slider-works { width: 90%; height: 20rem; } .works-inner .works-inner-items .slider-works div img { width: 25rem; height: 18rem; } .works-inner .works-inner-items .slick-arrow { cursor: pointer; position: absolute; top: 0; bottom: 0; margin: auto; } .works-inner .works-inner-items .prev-arrow { color: white; left: -1.5rem; top: 8rem; z-index: 10; } .works-inner .works-inner-items .next-arrow { color: white; right: -1.5rem; top: 8rem; }

js

$(".slider-works").slick({ infinite: true, autoplay: true, arrow: true, slidesToShow: 3, slidesToScroll: 1, autoplaySpeed: 4000, centerMode: true, centerPadding: "-10%", prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>', nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>', responsive: [ { breakpoint: 1024, settings: { infinite: true, autoplay: true, arrow: true, slidesToShow: 2, slidesToScroll: 1, autoplaySpeed: 4000, prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>', nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>', }, }, ], }); $(".slider-blog").slick({ slidesToShow: 3, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2, }, }, { breakpoint: 600, settings: { slidesToShow: 1, }, }, ], });```

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

Lhankor_Mhy
Lhankor_Mhy

2021/02/22 06:04

ご提示のコードを試してみましたが、当方の環境では768\*1024でスライダーが2枚になりました。 つまり、問題が再現しませんでした。 おそらく、ご提示いただいていない部分に原因があると思われます。 問題が再現するコードをご提示ください。
TMTN
TMTN

2021/02/22 13:51

問題が再現するコードとはどの部分を提示したらよろしいでしょうか。 初歩的な事ですいません。
lily_night2121
lily_night2121

2021/02/24 16:04

私の方でも確認しましたがLhankor_Mhyさんと同様2枚で表示することができました。 差し支えないレベルで結構ですので今回ご提示された部分以外の他のコードをできる限り見せていただけますでしょうか? 怪しいのはjs周りの競合だと思うので、今回ご提示いただいたjsコード以外に書かれているものがあればご提示ください。
TMTN
TMTN

2021/02/25 11:05

お返事ありがとうございます。 追加が遅くなり大変申し訳ございません。 関連するものは載せさせていただきました。 Worksと作っている要素にもSlick,jsを使用しているので挙動がかぶって何か問題が起こっているかもしれません。 しかし、自身では解決できませんでした。お手数お掛けしますがご確認いただけますでしょうか。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

jQueryプラグイン

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

JavaScript

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

jQuery

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

HTML

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

CSS

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