jQueryのプラグインsliderを機能させたいです。

初心者の投稿です。質問の意図がわかりにくかったらすみません。

jQueryのプラグインsliderが機能せずに苦戦しています。
以下の記事とGoogleChromeの検証画面を見ながらチェックしたのですが、原因がわかりません。
どなたかお力を貸していただけると幸いです。

以下のコードで検証画面を見ると、エラーメッセージ自体はなくなりました。
しかし、プラグインがうまく機能しないという状態です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="styles.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- javascript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- slick -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

    <title></title>
  </head>

---------------------------------------------------------------------

  <body>

        
          <ul class="slider　mt-4 list-unstyled">
            <li><img src="logo-white.jpeg"></li>
            <li><img src="image200.jpeg"></li>
            <li><img src="image300.jpeg"></li>
            <li><img src="image400.jpeg"></li>
          </ul>
       

    <!-- slick -->
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>

---------------------------------------------------------------------

  $(function(){
    $('.slider').slick();
   });

---------------------------------------------------------------------

 .slider{
  margin: 100px auto;
  width: 80%;
 }
 .slider img{
  height: 300px;
  width: 100%;
 }
 
 .slick-prev:before,
 .slick-next:before {
  color: #000;
 }

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

回答1件

ベストアンサー

まずCSSも読んであげてください。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

で、スライド画像の１つ上に対して.slick()させるので下記ですね。

js
1$(function(){
2  $('.slider > ul').slick();
3});

動くサンプル

###2020/01/01 21:04への返答

まず読むCSSに以下を追加で、

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

あとは別途下記CSSを追加してください。

css
1*{
2	box-sizing: border-box;
3	margin: 0;
4	padding: 0;
5}
6.slider{
7    margin: 100px auto;
8    width: 80%;
9}
10.slider img{
11	height: auto;
12	width: 100%;
13}
14/*slick setting*/
15.slick-prev:before,
16.slick-next:before{
17    color: #000 !important;
18}

画像下の黒ぽちは.slick()に以下オプションを追加です。

js
1$(function(){
2  $('.slider > ul').slick({
3    autoplay:true,
4    autoplaySpeed:5000,
5    dots:true,
6  });
7});

投稿2020/01/01 05:42

総合スコア15

2020/01/01 12:04

ご丁寧にありがとうございます！ CSSを読み込んだらサイトにボタンと画像の動きがでてきました。ただ、以下のサンプルページのような動きをイメージしていたのですが、画像が中央に１枚ずつ表示されず、左側に縦に４枚並んでしまっていたり、サンプルページの画像下の黒ぽちや左右のボタンの表現が異なっているようです。他に読み込みが必要なものなどがあるのでしょうか・・・。先ほどの投稿に修正後のコードを記載しましたのでご覧いただけますでしょうか。度々申し訳ございませんが、お返事いただけると幸いです。 https://webdesignday.jp/samples/p3847/sample01/