slickを使いスライドを作成したのですがレイアウトが崩れてしまいます
添付画像のようにdotsが縦に表示されてしまったり
marzin:auto;を指定しても左詰めになってしまっています。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>home</title> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 9 <link rel="stylesheet" href="css/style.css"> 10 <link rel="stylesheet" href="css/slick.css"> 11 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 13 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 14 <script src="js/slick.min.js"></script> 15 <script type="text/javascript" src="js/guiter.js"></script> 16</head> 17<body> 18 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 19 <a class="navbar-brand" href="#">楽器</a> 20 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 21 <span class="navbar-toggler-icon"></span> 22 </button> 23 24 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 25 <ul class="navbar-nav mr-auto"> 26 <li class="nav-item active"> 27 <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a> 28 </li> 29 <li class="nav-item"> 30 <a class="nav-link" href="#">商品情報</a> 31 </li> 32 <li class="nav-item"> 33 <a class="nav-link" href="#">新着情報</a> 34 </li> 35 <li class="nav-item"> 36 <a class="nav-link" href="#">問い合わせ</a> 37 </li> 38 <li class="nav-item dropdown"> 39 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 40 教室 41 </a> 42 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 43 <a class="dropdown-item" href="#">ギター教室</a> 44 <a class="dropdown-item" href="#">ピアノ教室</a> 45 <div class="dropdown-divider"></div> 46 <a class="dropdown-item" href="#">教室料金</a> 47 </div> 48 </li> 49 <li class="nav-item"> 50 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> 51 </li> 52 </ul> 53 <form class="form-inline my-2 my-lg-0"> 54 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> 55 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button> 56 </form> 57 </div> 58 </nav> 59 <div id="cap"> 60 <div><img src ="images/guiter1.jpeg" width="500px" height="250px"></div> 61 <div><img src ="images/guiter2.jpeg" width="500px" height="250px"></div> 62 <div><img src ="images/guiter3.jpeg" width="500px" height="250px"></div> 63 </div> 64 65</body>
css
1 2body { 3 position: relative; 4} 5/* トップページCSS */ 6.top{ 7 position:absolute; 8 top:0; 9 left:0; 10 right:0; 11 bottom:0; 12 margin:auto; 13 height:10%; 14 margin:auto; 15} 16/* ホームページCSS */ 17#cap{ 18 margin:auto; 19} 20
js
1$(document).ready(function(){ 2 $('#cap').slick({ 3 slidesToShow : 1, 4 slidesToScroll:1, 5 autoplay:true, 6 dots:true, 7 }); 8}); 9
解決方法を教えていただけないでしょうか?
回答1件
あなたの回答
tips
プレビュー