ご教授ください。
slickを利用した数個の画像の無限ループスライドショーを実装したいです。
必要なファイルをダウンロードしたり、ファイルにアップロード、HTMLヘッド部分への読み込みなど行なっているつもりですが、スライドショーが行われません。デベロッパーツールでは特にエラーは見当たらないのですが。ごく基本的な事かもしれませんが、気づけないので教えていただけると幸いです。
・4つの画像を右から左へ自動無限ループスライドショーにしたい。
・slick HPよりファイルはダウンロード
・ドキュメントファイルがある同じ階層にslickフォルダを作成し、そこに
●slick.css
●slick-theme.css
●fontフォルダ
●ajax-loader.gif
●slick.min.js
は入れました。
・jQueryは外部ファイルscript.jsに書いています。
(外部ファイルが読み込めているかはalertなど表示させてみて確認しています。)
HTML
1<head> 2<link rel="stylesheet" type="text/css" href="https://meyerweb.com/eric/tools/css/reset/reset.css"> 3 <link rel="stylesheet" href="css/style.css"> 4 <link rel="stylesheet" href="slick/slick.css"> 5 <link rel="stylesheet" href="slick/slick-theme.css"> 6 <script src="js/jquery-3.3.1.min.js"></script> 7</head> 8
HTML
1 <script src="slick/slick.min.js"></script> 2 <script src="js/script.js"></script> 3</body> 4
HTML
1<div id="loopSlider"> 2 <ul> 3 <li><img src="images/pc/news/news_img.jpg" width="320px" height="250px" alt=""></li> 4 <li><img src="images/pc/about/about_03.jpg" width="320px" height="250px" alt=""></li> 5 <li><img src="images/pc/about/about_02.jpg" width="320px" height="250px" alt=""></li> 6 <li><img src="images/pc/about/about_01.jpg" width="320px" height="250px" alt=""></li> 7 8 </ul> 9 </div>
JS
1$(document).ready(function(){ 2 $('#loopSlider').slick({ 3 arrows: false, 4 slidesToShow: 2, 5 autoplay: true, 6 autoplaySpeed: 0, 7 cssEase: 'linear', 8 speed: 5000 9}); 10});
回答1件
あなたの回答
tips
プレビュー