slickが反映されません。

Question

学習でslickを実装しようと試みていますが、横に自動でスライドされません。
下記に詳細を書きます！
何卒よろしくお願いいたします。

・目的
slickする部分をリストタグで囲み、それぞれのリストをslickさせたいです。

・現状
slickできません。画像も立て並びになります.
一部省略しています。（image部分とtext内のpタグ）

<div class="rec">
            
            <ul class="rec-list">
                <li class="rec-slick rec-item" id="rec-slick">
                    <a href="#">
                        <div class="text">
                            <p>??</p>
                            <p class="price">お値段：<span>6000円</span> / 人</p> 
                        </div>
                        <div class="image_plan">
                            <img src="image/??" alt="食べ物"></img>
                        </div>
                        </a>
                
                </li>
                <li class="rec-slick rec-item" id="rec-slick"> 
                    <a href="#">
                        
                        <p>??</p>
                        <p class="price">お値段：<span>8000円</span> / 人</p>
                        <img class="image_plan" src="image/???" alt="季節ドリンク"></img>

                        
                        
                    </a>
                </li>
              

やったこと
・CSSフォルダーにajax-loadertとfontsフォルダーを入れる。読み込みたいCSSfileと同じ階層に置きました
・CSSフォルダーにslick-theme.cssとslick.cssを入れました。
・jQueryフォルダーにjquery-3.6.0.minとslick.min、script.jsを入れました

・調べたこと
下記で調べましたがよくわからなくなりました。
https://yu-z.com/howto_slick/

コードで書いた内容
◆head, body内に下記を書きました

<link rel="stylesheet" href="CSS/reset-html5.css">
    <link rel="stylesheet" href="CSS/style.css">
    <link rel="stylesheet" href="CSS/slick.css">
    <link rel="stylesheet" href="CSS/slick-theme.css">

<link rel="stylesheet" href="JQuery/jquery-3.6.0.min.js">
<link rel="stylesheet" href="JQuery/script.js">
<script type="text/javascript" 
src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript" src="jQuery/slick.min.js"></script>

◆jQueryに下記を書きました

$(function(){

    $('#rec-slick').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
        autoplay: true,
        autoplayspeed: 5000,
      });
       
    });

Comments

[m.ts10806]

エラー出てませんか。ブラウザ開発ツールのコンソール。

[m.ts10806]

あと、同ページにID重複は文法としてNGですし、JavaScriptが正しく要素を認識しないことがあります。

[free_teku]

id重複は修正いたしました。
Jsのエラーは出ていません。
こちらのエラーは出ています↓
[CSSTree] Invalid value for `display` property
表示が下記の部分だそうですが、全角にもなっていませんがエラー表示です。
display: -ms-flexbox;-ms-flexbox;

Answer 1

slick sliderは親要素に対してclass等指定しなければならないので、

    $('.rec-list').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
        autoplay: true,
        autoplayspeed: 5000,
      });

が正しいかなと思います。

20210509追記
slidesToScroll: 3の後ろのカンマが抜けているのと、autoplaySpeedが正しいですね。これで動作確認はできました。

$('.rec-list').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
});

Comments

[free_teku]

ご回答いただきありがとうございます。変わりませんでした泣

[gamips]

ケアレスミスがあったので回答に追記しました。

[free_teku]

教えていただきありがとうございます！