slick.jsを利用して、スライダーを作成するときに、dotsオプションがうまく利用できません。ドットがとても小さい粒のような大きさになってしまい、サイズを大きくする方法がわかりません。
フォルダ構成
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/slick.css"> <link rel="stylesheet" type="text/css" href="css/slick-theme.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <ul class="slider"> <li><a href="#"><img src="images/1.jpeg" alt="image01"></a></li> <li><a href="#"><img src="images/2.jpeg" alt="image01"></a></li> <li><a href="#"><img src="images/3.jpeg" alt="image01"></a></li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="js/slick.min.js"></script> <script src="js/script.js"></script> </body> </html>
style.css
.slider { width:500px; margin:0 auto; } .slider img { width:100%; }
script.js (slikのプログラム)
$(".slider").slick({ autoplay: true, // 自動再生を設定 autoplaySpeed: 3000, // 自動再生のスピード(ミリ秒単位) dots: true, // ドットインジケーターの表示 });
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。