Q&A
slick の配布ファイルに含まれている fonts/ ディレクトリをコピーしましたか?
質問失礼します。JavaScriptのslickで左の矢印だけが表示されません。chromeのディベロッパーツールで検索すると、画面内に存在しているが見えていないという事になっています。
さらに、左矢印付近をhoverしてもカーソルの形が変わらないという状態です。
どのような対処をすればよいのでしょうか。
試したこと：slick-theme.cssを可能な限りいじってみた。
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 <title>jQuery 追加課題2</title> 7 <link rel="stylesheet" href="css/style.css" /> 8 <link rel="stylesheet" href="css/reset.css"> 9 <link rel="stylesheet" href="css/slick-theme.css"> 10 <link rel="stylesheet" href="css/slick.css"> 11 </head> 12 <body> 13 <header class="header"> 14 <div class="inner"> 15 <div class="header-items"> 16 <div class="header-ttl"><h3>Itariano Tres biano</h3></div> 17 <nav class="header-nav"> 18 <ul class="header-nav-ul"> 19 <li class="header-nav-li"><a href="">home</a></li> 20 <li class="header-nav-li"><a href="">menu</a></li> 21 <li class="header-nav-li"><a href="">access</a></li> 22 <li class="header-nav-li"><a href="">contact</a></li> 23 </ul> 24 </nav> 25 </div> 26 27 </div> 28 29 </header> 30 <div class="top-mv"> 31 <h2 class="top-mv-ttl">Itariano Tres biano</h2> 32 </div> 33 <div class="menu"> 34 <h2 class="menu-ttl">Menu</h2> 35 <div class="menu-slide"> 36 <ul class="slider"> 37 <li><img src="img/meatball.jpg" alt="" width="310px" height="400px"></li> 38 <li><img src="img/pasta01.jpg" alt="" width="310px" height="400px"></li> 39 <li><img src="img/pasta02.jpg" alt="" width="310px" height="400px"></li> 40 <li><img src="img/pizza.jpg" alt="" width="310px" height="400px"></li> 41 <li><img src="img/tiramisu.jpg" alt="" width="320px" height="400px"></li> 42 </ul> 43 <!-- <div class="menu-slide-area"> 44 <div><img src="img/meatball.jpg" alt=""></div> 45 <div><img src="img/pasta01.jpg" alt=""></div> 46 <div><img src="img/pasta02.jpg" alt=""></div> 47 <div><img src="img/pizza.jpg" alt=""></div> 48 <div><img src="img/tiramisu.jpg" alt=""></div> 49 </div> --> 50 51 52 </div> 53 </div> 54 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 55 <script src="js/main.js"></script> 56 <script src="js/jquery.bgswitcher.js"></script> 57 <script src="js/slick.min.js"></script> 58 59 </body> 60</html> 61
slick
1@charset 'UTF-8'; 2/* Slider */ 3.slick-loading .slick-list 4{ 5 background: #fff url('./ajax-loader.gif') center center no-repeat; 6} 7 8/* Icons */ 9@font-face 10{ 11 font-family: 'slick'; 12 font-weight: normal; 13 font-style: normal; 14 15 src: url('./fonts/slick.eot'); 16 src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); 17} 18/* Arrows */ 19.slick-prev, 20.slick-next 21{ 22 font-size: 0; 23 line-height: 0; 24 25 position: absolute; 26 top: 50%; 27 28 display: block; 29 30 width: 20px; 31 height: 20px; 32 padding: 0; 33 -webkit-transform: translate(0, -50%); 34 -ms-transform: translate(0, -50%); 35 transform: translate(0, -50%); 36 37 cursor: pointer; 38 39 color: black; 40 border: none; 41 outline: none; 42 background: transparent; 43} 44.slick-prev:hover, 45.slick-prev:focus, 46.slick-next:hover, 47.slick-next:focus 48{ 49 color: transparent; 50 outline: none; 51 background: transparent; 52} 53.slick-prev:hover:before, 54.slick-prev:focus:before, 55.slick-next:hover:before, 56.slick-next:focus:before 57{ 58 opacity: 1; 59} 60.slick-prev.slick-disabled:before, 61.slick-next.slick-disabled:before 62{ 63 opacity: .25; 64} 65 66.slick-prev:before, 67.slick-next:before 68{ 69 font-family: 'slick'; 70 font-size: 40px; 71 line-height: 1; 72 73 opacity: .75; 74 color: gray; 75 76 -webkit-font-smoothing: antialiased; 77 -moz-osx-font-smoothing: grayscale; 78} 79 80.slick-prev 81{ 82 left: 40px; 83} 84[dir='rtl'] .slick-prev 85{ 86 right: -25px; 87 left: auto; 88} 89.slick-prev:before 90{ 91 content: '←'; 92} 93[dir='rtl'] .slick-prev:before 94{ 95 content: '→'; 96} 97 98.slick-next 99{ 100 right: 40px; 101} 102[dir='rtl'] .slick-next 103{ 104 right: auto; 105 left: -25px; 106} 107.slick-next:before 108{ 109 content: '→'; 110} 111[dir='rtl'] .slick-next:before 112{ 113 content: '←'; 114} 115 116/* Dots */ 117.slick-dotted.slick-slider 118{ 119 margin-bottom: 30px; 120} 121 122.slick-dots 123{ 124 position: absolute; 125 bottom: -25px; 126 127 display: block; 128 129 width: 100%; 130 padding: 0; 131 margin: 0; 132 133 list-style: none; 134 135 text-align: center; 136} 137.slick-dots li 138{ 139 position: relative; 140 141 display: inline-block; 142 143 width: 20px; 144 height: 20px; 145 margin: 0 5px; 146 padding: 0; 147 148 cursor: pointer; 149} 150.slick-dots li button 151{ 152 font-size: 0; 153 line-height: 0; 154 155 display: block; 156 157 width: 20px; 158 height: 20px; 159 padding: 5px; 160 161 cursor: pointer; 162 163 color: transparent; 164 border: 0; 165 outline: none; 166 background: transparent; 167} 168.slick-dots li button:hover, 169.slick-dots li button:focus 170{ 171 outline: none; 172} 173.slick-dots li button:hover:before, 174.slick-dots li button:focus:before 175{ 176 opacity: 1; 177} 178.slick-dots li button:before 179{ 180 font-family: 'slick'; 181 font-size: 6px; 182 line-height: 20px; 183 184 position: absolute; 185 top: 0; 186 left: 0; 187 188 width: 20px; 189 height: 20px; 190 191 content: '•'; 192 text-align: center; 193 194 opacity: .25; 195 color: black; 196 197 -webkit-font-smoothing: antialiased; 198 -moz-osx-font-smoothing: grayscale; 199} 200.slick-dots li.slick-active button:before 201{ 202 opacity: .75; 203 color: black; 204} 205
js
1'use strict'; 2 3 4$(function () { 5 6 jQuery(function($) { 7 $('.top-mv').bgSwitcher({ 8 images: ['img/mv.jpg','img/mv_2.jpg','img/mv_3.jpg'], // 切り替え画像 9 Interval: 5000, //切り替えの間隔 1000=1秒 10 start: true, //$.fn.bgswitcher(config)をコールした時に切り替えを開始する 11 loop: true, //切り替えをループする 12 shuffle: false, //背景画像の順番をシャッフルする 13 effect: "fade", //エフェクトの種類 "fade" "blind" "clip" "slide" "drop" "hide" 14 duration: 1000, //エフェクトの時間 1000=1秒 15 easing: "swing", //エフェクトのイージング "swing" "linear" 16 }); 17}); 18 19 20 $('.slider').slick({ 21 slidesToShow:4, 22 slidesToScroll:1 23 }); 24 25 26 27// $('.slider').slick({ 28// slideToShow:4, 29// }); 30 31// $('.menu-slide-area').slick({ 32// dots:true, 33// slideToShow:4, 34// }); 35 36 /* ===== hamburger ===== * 37 38 /* ===== carousel ===== */ 39 40 41});
回答1件
0
ベストアンサー
ボタンが画像の下に隠れている状態かと思いますので、下記cssを追加してみてはどうでしょうか。
css
1.slick-prev, 2.slick-next{ 3 z-index: 99; 4}
投稿2021/09/01 08:07
総合スコア1293
ご指摘ありがとうございます！解決しました！
このようなz-indexの指定はslickを使った時毎回行うものなのでしょうか。
slickのデフォルト(付属しているcssファイル)ではボタンの位置は画像の外になっていたと思うので、重ならないためz-indexが無くても問題ありません。
それを変更して画像上に置く場合は毎回必要だと思います。
なるほど、勉強になります。
ありがとうございます。
あなたの回答
tips
プレビュー
