前提・実現したいこと
slick導入して、センター寄り(両端に前後の画像が少し見えている)自動スライダーを作りたい。
以下、症状(画像1)と理想(画像2)。
発生している問題・エラーメッセージ
スライド式にならず、ただのリスト表示になる。
以下、エラーメッセージ。
×Failed to load resource: net::ERR_FILE_NOT_FOUND jquery.min.js:1
×slick.min.js:1 Uncaught ReferenceError: jQuery is not defined slick.min.js:1
at slick.min.js:1
at slick.min.js:1
×main.js:1 Uncaught SyntaxError: Unexpected token < main.js:1
該当のソースコード
◆配置状況は、
Dドライブ─サンプル ┏ index.html
-----------------------┣ 【css】─ index.css
-----------------------┣ 【images】─ スライダー用jpg700*350を4種
-----------------------┣ 【js】─ main.js
-----------------------┗ 【slick】 ┳【font】
------------------------------------┣ ajax-loader.gif
------------------------------------┣ slick.css
------------------------------------┣ slick-theme.css
------------------------------------┗ slick.min.js
◆index.htmlの内容は、
html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>サンプル</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" /> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" /> <script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="slick/slick.min.js"></script> <script src="js/main.js"></script> </head> <body> <div id="bannerslider"> <ul class="slider"> <li><a href="#"><img src="images/slider1.jpg" alt="image01"></a></li> <li><a href="#"><img src="images/slider2.jpg" alt="image02"></a></li> <li><a href="#"><img src="images/slider3.jpg" alt="image03"></a></li> <li><a href="#"><img src="images/slider4.jpg" alt="image04"></a></li> </ul> </div> </body> </html>
◆index.css部分は、
css
.bannerslider{ width: 1000px; }
◆main.js部分は、
javascript
<script type="text/javascript"> $('.slider').slick({ centerMode: true, centerPadding: '100px', dots:true, focusOnSelect:true, }); </script>
◆slickフォルダのcssやjsはいじっておりません。
なお、ローカル環境での確認のため、
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> の部分にhttpをつけています。 ### 試したこと 色々な解説サイトを見て実践してみました。 index.css以外は解説サイト記載のコードをコピペ。 ### 補足情報(FW/ツールのバージョンなど) slick1.7まだ回答がついていません
会員登録して回答してみよう