前提・実現したいこと
お世話になります。
jQeryの勉強中でして、行き詰っておりますのでアドバイスを頂きたいです。
slickを使用したカルーセルを実装したいです。
発生している問題・エラーメッセージ
現在ローカル環境で作業しています。
← →を押したりしてみても
カルーセルが動きません。
調べたとおりに記述をしてうまくいかないので、どこがいけないのかが分からない状態です。
ご教授いただけますと幸いです。
どうぞよろしくお願い致します。
該当のソースコード
html
1<head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <title>Document</title> 5 <!-- CSS --> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> 7 <!-- Add the slick-theme.css if you want default styling --> 8 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> 9 <!-- Add the slick-theme.css if you want default styling --> 10 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> 11 <link rel="stylesheet" href="style.css"> 12</head> 13 14<body> 15 <div class="carousel"> 16 <div><img src="img/.jpg" alt="1"></div> 17 <div><img src="img/.jpg" alt="2"></div> 18 <div><img src="img/.jpg" alt="3"></div> 19 </div> 20 <!-- JS --> 21 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 22 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 23 <script src="./js/carousel.js"></script> 24</body> 25</html>
js
1$(document).ready(function(){ 2 $('.carousel').slick(); 3 });
jsはフォルダ[js]を作ってその中に上記のコードを記述したcarousel.jsを入れています。
###試したこと
検証ツールで確認しましたがエラーはないようです。
>調べたとおりに記述をしてうまくいかないので、
何が起こってるんでしょう
>現在ローカル環境で作業しています。
「ローカル環境」ではわかることはほとんどないので
OS、試したブラウザ、アクセスURL
提示してください。
回答1件
あなたの回答
tips
プレビュー