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

スライダーライブラリの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});

m.ts10806

2021/03/12 03:38

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

uheiuhei

2021/03/12 03:42

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

m.ts10806

2021/03/12 03:43

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

行動規範の内容に同意します

回答1件

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

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