jqueryを用いたスライドショーの実行

こんばんわ。現在制作しているWEBサイトで、トップ画像をスライドショーにしたかったのでjquery-3.4.1をファイルにダウンロードして
実行させようとしたのですが、スライドショーが開始しません。
下記に強調、イタリックで指定している部分がそうなのですがCSSにも記述が必要でしょうか？
宜しくお願い致します。

<!DOCTYPE html>
<html lange="ja">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/reset.css">
<link rel="stylesheet" href="css/slick.css" />
<body>
<header class="header wrapper">
    <img src="images/logo_1-8.png" class="logo">
</header>
    <div class="m_visual">
        <div class="cp_cssslider">
            <div id="slideshowr">
                <img src="slide/top.png" class="active">
                <img src="slide/top2-8.png">
                <img src="slide/top3-8.png">
                <img src="slide/top4-8.png">
            </div>
        </div>
    </div>

＜!----省略-------＞

</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="slick/slick/slick.js"></script>
  <script type="text/javascript" src="slick/slick/slick.min.js"></script>
  <script>　
    $(document).ready(function(){
     　$('#slideshowr').slick({
     　setting-name: setting-value
     　});
     });
    </script>
</body>
</html>

CSS
@charset "utf-8";

body{
    background-color: #663333;
}
.wrapper{
    max-width: 1280px; 
    margin: 0 auto;
    padding: 3px;  
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
 }

.m_visual{
    background-color: black;
    background-size: cover;
}







.menu_list_left{
    float: left;
}
.menu_list_right{
    float: left;
}

footer{
    background-color:black;
    height: 100px;
}

kei344

2020/04/08 13:12

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

natsu_kawa

2020/04/08 13:18

失念していました。すいません。修正しましたｍ(_ _)m

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

回答1件

まず前提としてソースコードを見た感じだと、slickのjsファイルが読み込まれてないように見えます。

また、セレクタがID名指定になっていないのでslideshowrのdivタグにslickが生成されないです。

javascript
1//$('slideshowr').slick();
2//↑だと<slideshowr>というタグを指定しているのでid名の場合は#をID名の前につける
3$('#slideshowr').slick();

あとスライドショーの自動再生は明示的に指定しないと動きません。
$('#slideshowr').slick();のタイミングでautoplayオプションをtrueにすれば、スライドショーが自動で始まります。
オプションの指定方法は他のJQueryプラグインと同じです。
slickの使い方を解説しているサイトはたくさんあるので、まずはそのあたりでオプションの種類をざっと確認するほうが良いと思います。

参考：
https://www.jungleocean.com/programming/190201jquery-slick#outline__3
https://stand-4u.com/web/javascript/slick.html

投稿2020/04/08 16:05