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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

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

HTML

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

CSS

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

解決済

Slick.jsにてスライドショーを実装したいのですが、2点思い通りに実装されない点があります。

TMTN
TMTN

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

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

HTML

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

CSS

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

1回答

0評価

0クリップ

7閲覧

投稿2021/02/13 06:22

前提・実現したいこと

Slick.jsにてスライドショーを実装したいのですが、2点思い通りに実装されない点があります。

①矢印を右のみ(黒色で)反映させたいのですが、矢印が反映されません。
②画像を押したら別リンクページに飛ぶようにしたく、指定していて該当ページに飛ぶことはできるのですが、
画像と画像の間に余白がページ上ではみられますが、カーソルを合わせると境目がなく、
画像と画像の間の余白にカーソルを合わせてもポインターが出てきてしまいます。

画像のみ(アンカーの指定範囲が画像の大きさ)に指定することは可能でしょうか。

大変申し訳ございませんが、わかる方ご教示願います。

該当のソースコード

html

<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

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; } .blog-inner .blog-inner-items .slider-blog .blog-article a img { width: 350px; height: 250px; margin: 0 auto; margin: 1rem; } .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-blog ======> */ .blog-inner .blog-inner-items .slick-arrow { cursor: pointer; } .blog-inner .blog-inner-items .next-arrow { color: black; }

js

$(".slider-blog").slick({ infinite: true, arrow: true, slidesToShow: 3, slidesToScroll: 1, nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>', responsive: [ { breakpoint: 1024, settings: { infinite: true, arrow: true, slidesToShow: 2, slidesToScroll: 1, nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>', }, }, ], });

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

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

HTML

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

CSS

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