質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1198閲覧

カルーセルスライダーslickの前後ボタン(矢印)が上手く表示されない

maring

総合スコア41

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2022/05/22 10:10

困っている事

下記画像のようにカルーセルスライダーの前後ボタンの「←」だけが何故か上手く表示されません。
イメージ説明

試したこと

・色付けを赤にして矢印の位置を特定
・.slick-prevを{left: 80px;}に (表示されている「→」の.slick-next{right: 80px;}と同条件)
・z-index で100にしてみても変わらず

やりたいこと

埋まっている「←」を「→」同様に上手く表示させたい

ご教授よろしくお願いいたします。

html

1 <div class="p-slide"> 2 <ul class="p-slide-items"> 3 <li><a href=""><img class="p-slide-img" src="./assets/images/photo1.png" alt=""></a></li> 4 <li><a href=""><img class="p-slide-img" src="./assets/images/photo1.png" alt=""></a></li> 5 <li><a href=""><img class="p-slide-img" src="./assets/images/photo1.png" alt=""></a></li> 6 <li><a href=""><img class="p-slide-img" src="./assets/images/photo1.png" alt=""></a></li> 7 <li><a href=""><img class="p-slide-img" src="./assets/images/photo1.png" alt=""></a></li> 8 </ul> 9 </div>

css

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: transparent; 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: 50px; 71 line-height: 1; 72 73 opacity: .75; 74 color: rgb(255, 0, 0); 75 76 -webkit-font-smoothing: antialiased; 77 -moz-osx-font-smoothing: grayscale; 78} 79 80.slick-prev 81{ 82 left: 80px; 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: 80px; 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

javascript

1 $('.p-slide-items').slick({ 2 centerMode: true, 3 centerPadding: '100px', 4 slidesToShow: 2, 5 arrows: true 6});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

z-indexを指定するプロパティが間違っていたようです。
無事「←」が押下できるようになりました。

投稿2022/05/23 18:43

maring

総合スコア41

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問