前提・実現したいこと
【jQuery】スライダープラグイン「slick」を使うため、https://webdesignday.jp/inspiration/technique/jquery-js/3847/
コチラのサイトを参考にしてやってみたのですが反映されません。
なぜでしょうか。
HTM
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <link rel="stylesheet" href="css/riset.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-min.js"></script> <script src="js/index.js"></script> <link href="js/slick-theme.css" rel="stylesheet" type="text/css"> <link href="js/slick.css" rel="stylesheet" type="text/css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> <script type="text/javascript" src="js/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/ slick/slick.css"/> </head> <body> <main id="main"> <article id="main_top1"> <ul class="slider"> <li class="img"><a href="#"><img src="image/oc_dou.jpg" alt="image01"></a></li> <li class="img"><a href="#"><img src="image/yoga_sei.jpg.jpg" alt="image02"></a></li> <li class="img"><a href="#"><img src="work3_1.jpg.jpg" alt="image03"></a></li> </ul> </article> <article id="main_top2"> </article> </main> </body>
CSS
@charset "UTF-8"; /* CSS Document */ body{ font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; /* background-image: url(../image/top.jpg);*/ /* width: 1400px;*/ font-size: 10px; color: #000000; min-width: 1000px; } #main{ width: 1044px; margin-left: auto; margin-right: auto; } .main_top1{ padding-bottom:38px; } .slider{ margin: 100px auto; width: 80%; } .slider img{ height: auto; width: 100%; } /*slick setting*/ .slick-prev:before, .slick-next:before { color: #000; }
JavaScript
// JavaScript Document $('.slider').slick({ autoplay:true, autoplaySpeed:5000, dots:true, });
回答1件
あなたの回答
tips
プレビュー