jqueryのスライダーが正常に表示されません

Question

!ご覧いただきありがとうございます。初心者なので必要な情報等足りないものがありましたらご指摘いただけると幸いです。

jqueryのスライダーを作成していますが、jqueryを記述すると画像がページ上から消えてしまいます。jqueryを削除すると画像は正常に表示されます。jqueryそのものが正常に動作するかどうかは確認済みです。

検証ページの方も確エラーコード（？）が出ていますが、どのように解決すればいいのでしょうか

コード
```<div class="slider1">
        <div>
            <img src="./slider/slider1.png" alt="スライダー画像">
        </div>
        <div>
            <img src="./slider/slider2.png" alt="スライダー画像">
        </div>
        <div>
            <img src="./slider/slider3.png" alt="スライダー画像">
        </div>
        <div>
            <img src="./slider/slider4.png" alt="スライダー画像">
        </div>
        <div>
            <img src="./slider/slider5.png" alt="スライダー画像">
        </div>
        <div>
            <img src="./slider/slider6.png" alt="スライダー画像">
        </div>
    </div>

$(function () {
  $('.slider1').slick({
    autoplay:true,
    autoplaySpeed:0,
    speed:3000,
    cssEase:"linear",
    slidesToShow:5,
    swipe: false,
    arrows:false,
    responsive: [
      {
        breakpoint: 599,
        settings: {
          slidesToShow:2.5,
        }
      }
    ]
  })
 })

    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/common.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/jquery.inview.min.js"></script>
<script src="./js/slick.min.js"></script>
<script src="./js/main.js"></script>

 ![イメージ説明](e904784ea99a244c0bc9d6cc64d5a4af.png)

Answer 1

js自体は動作している、ということですので
添付画像にあるこちらのエラーコードが重要かもしれません。

Refused to apply style from 'http://127.0.0.1:5500/css/slick.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME type checking is enabled.

slickを正常に動作させるにはjs以外にCSSの読み込みが必要ですが、うまく開けていないようですね。

エラー自体は「slick.cssのMIME type が text/html になっているがそれはスタイルシート用には使えないtypeだ」という内容です。

ただし、ローカル環境でCSSに対して発生しているところから考えると
考えられる原因として代表的なものは、
**「ファイルのパスが間違っている」**というものです。

ファイルフォルダ構成は下記のような感じになっているでしょうか？

├css
│├slick.css
├top.html

もしパスが異なるようでしたら修正してみてください。
同様のエラーが出て、パスを修正している事例を2件参考として記載いたします。

参考

• CSSファイルが読み込めない原因。パスにあります。（Refused to apply style from 'https~' because its MIME type~）
• CSSファイルが読み込めないエラーが出たときはパスを確認すべし

その他

link タグ に正しいtypeを記載する方法を示している人もいました。
ChromeのコンソールでCSSエラーが発生する

link rel="stylesheet" は type を書かなくても動作するはずですが、
パスに誤りがない場合、もしかするとこちらが有効かもしれません。

通常このように書くところを

<link rel="stylesheet" href="style.css">

このように変更するという方法です。

<link rel="stylesheet" href="style.css" type="text/css">

Comments

[sekiguchikouta]

ご回答ありがとうございます。
sassを使って記述しているので、そこで何か問題があるのかもしれません。
しかし、top.htmlから各リンク先は問題なく表示されます。この場合でもパスの間違いを疑うべきなのでしょうか？
また、typeの入力は試しましたが変化はありません。こちらはsassの場合、記述も変わるのでしょうか？

[AsukaKobayashi]

フォルダ構造のキャプチャ画像を追記いただいたようでありがとうございます。

また、回答のコードを参考URLよりコピペしたため、
混乱させてしまったかもしれないのですが、
今回解決するべきだと考えられるのは「/css/slick.css」が正常に読み込めていない問題です。

> sassを使って記述しているので

slick.cssは jQueryプラグイン slick に jsファイルとセットで含まれているcssファイルですので、
（slick.min.js と同様に）ローカルのフォルダにダウンロードしたものを入れるだけでよいはずなので、
sassについては関係ないでしょう。

> top.htmlから各リンク先は問題なく表示されます。

とのことなのですがキャプチャ画像を見る限り
「css」フォルダには 「slick.css」 が入っていないようです。

「css」フォルダに slick.cssを入れていただくか、
HTML側に正しいフォルダ名を記述いただく必要があると思います。

[sekiguchikouta]

再度の回答ありがとうございます。
cssフォルダ内にslick.cssを入れたらスライダーが表示されるようになりました。
しかし、同じものをもう一つ実装しようとしたら、同様に表示されません。
エラーコードの表示を見てslick-theme.cssをcssファイル内に入れてみましたが変化はありませんでした。

[sekiguchikouta]

コード内に余計な記述があったのが理由でした。
おかげさまで無事に解決いたしました。
ありがとうございました。