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

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

新規登録して質問してみよう
ただいま回答率
85.39%
スライダー

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

jQuery

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

Q&A

1回答

5541閲覧

slickでドットの表示が変になる

uheiuhei

総合スコア0

スライダー

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

jQuery

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

0グッド

0クリップ

投稿2021/03/12 02:11

スライダーライブラリのslickでドットが数字になり縦に表示されます。

↓です。

イメージ説明

ドットで横に表示したいのですがネットで調べても原因がわかりませんでした。
どうすればドットを横に表示できるのでしょうか?

HTML

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" type="text/css" href="css/slick.css"/> 8 <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/> 9 <link href="./css/style.css" rel="stylesheet" type="text/css"> 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 11 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 12 <title>wordpressサイトの模写</title> 13 </head> 14 <body> 15 <main> 16 <div class="sliderArea"> 17 <div class="regular slider"> 18 <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div> 19 <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div> 20 <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div> 21 <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div> 22 <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div> 23 </div> 24 </div> 25 26 27 28 </main> 29 <script type="text/javascript" src="js/slick.min.js"></script> 30 <script type="text/javascript" src="js/common.js"></script> 31 </body> 32</html>

css

1.sliderArea { 2 max-width: 100%; 3 margin: 0 auto; 4 padding: 0 25px; 5 6 margin-top: 100px; 7 } 8 .sliderArea.w300 { 9 max-width: 300px; 10 } 11 .slick-slide { 12 margin: 0 5px; 13 } 14 .slick-slide img { 15 width: 100%; 16 height: auto; 17 } 18 .slick-prev, .slick-next { 19 z-index: 1; 20 } 21 .slick-prev:before, .slick-next:before { 22 color: #000; 23 } 24 .slick-slide { 25 transition: all ease-in-out .3s; 26 opacity: .2; 27 } 28 .slick-active { 29 opacity: 1; 30 } 31 .slick-current { 32 opacity: 1; 33 } 34 .thumb { 35 margin: 20px 0 0; 36 } 37 .thumb .slick-slide { 38 cursor: pointer; 39 } 40 .thumb .slick-slide:hover { 41 opacity: .7; 42 }

jQuery

1$(function(){ 2 3 $(".regular").slick({ 4 autoplay: true, 5 autoplaySpeed: 4000, 6 dots: true, 7 dotsClass:'slick-dotsj' 8 }); 9 10});

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

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

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

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

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

m.ts10806

2021/03/12 03:38

cssは正しくリンクされてますか?
uheiuhei

2021/03/12 03:42

回答ありがとうございます。 間違ってないです。
m.ts10806

2021/03/12 03:43

どのように確認しましたか? ブラウザ開発ツールのコンソールにエラーが出てるかどうかだと、どうでしょう
guest

回答1

0

とりあえずの対応であれば、この設定を外せばいいです。

js

1 $(".regular").slick({ 2 autoplay: true, 3 autoplaySpeed: 4000, 4 dots: true, 5// dotsClass:'slick-dotsj' ←これ 6 });

独自クラスをつけるのであれば、CSSも独自に用意する必要があります。

投稿2021/03/12 04:02

Lhankor_Mhy

総合スコア36782

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

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

Lhankor_Mhy

2021/03/16 01:15

解決しませんか? わかりにくい点があれば、コメントでご連絡ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問