Q&A
まだ質問が「受付中」になっていますが、解決されていないのでしょうか。解決されていないなら状況を質問文に追記ください。
前提・実現したいこと
最終的にこの画像のようにしたいです。
・ 初期では"次へ"だけがアクティブ色になる
・ 中間では"次へ"と"戻る"がアクティブ色になる
・ 最後では"戻る"だけがアクティブ色になる
イメージ的には、このサイトのWhat’s Newのスライダーのイメージです。
参考サイト
現時点では、全部アクティブ色になってしまっています。
お手数おかけしますがご回答お待ちしております（ ; ; ）
該当のソースコード
html
1 <div class="slider2"> 2 <div> 3 <a class="#"> 4 <img alt="Alt" src="images/top_works-img1.jpg" > 5 </a> 6 </div> 7 <div> 8 <a class="#"> 9 <img alt="Alt" src="images/top_works-img1.jpg" > 10 </a> 11 </div> 12 <div> 13 <a class="#"> 14 <img alt="Alt" src="images/top_works-img1.jpg" > 15 </a> 16 </div> 17 <div> 18 <a class="#"> 19 <img alt="Alt" src="images/top_works-img1.jpg" > 20 </a> 21 </div> 22 <div> 23 <a class="#"> 24 <img alt="Alt" src="images/top_works-img1.jpg" > 25 </a> 26 </div> 27 </div>
css
1 2/* Slider2 */ 3 4.slider2 .slick-slider 5{ 6 position: relative; 7 8 display: block; 9 box-sizing: border-box; 10 11 -webkit-user-select: none; 12 -moz-user-select: none; 13 -ms-user-select: none; 14 user-select: none; 15 16 -webkit-touch-callout: none; 17 -khtml-user-select: none; 18 -ms-touch-action: pan-y; 19 touch-action: pan-y; 20 -webkit-tap-highlight-color: transparent; 21} 22 23.slider2 .slick-list 24{ 25 position: relative; 26 27 display: block; 28 overflow: hidden; 29 30 margin: 0; 31 padding: 0; 32} 33.slider2 .slick-list:focus 34{ 35 outline: none; 36} 37.slider2 .slick-list.dragging 38{ 39 cursor: pointer; 40 cursor: hand; 41} 42 43.slider2 .slick-slider .slick-track, 44.slider2 .slick-slider .slick-list 45{ 46 -webkit-transform: translate3d(0, 0, 0); 47 -moz-transform: translate3d(0, 0, 0); 48 -ms-transform: translate3d(0, 0, 0); 49 -o-transform: translate3d(0, 0, 0); 50 transform: translate3d(0, 0, 0); 51} 52 53.slider2 .slick-track 54{ 55 position: relative; 56 top: 0; 57 left: 0; 58 59 display: block; 60 margin-left: auto; 61 margin-right: auto; 62} 63.slider2 .slick-track:before, 64.slider2 .slick-track:after 65{ 66 display: table; 67 68 content: ''; 69} 70.slider2 .slick-track:after 71{ 72 clear: both; 73} 74.slider2 .slick-loading .slick-track 75{ 76 visibility: hidden; 77} 78 79.slider2 .slick-slide 80{ 81 display: none; 82 float: left; 83 84 height: 100%; 85 min-height: 1px; 86} 87[dir='rtl'] .slick-slide 88{ 89 float: right; 90} 91.slider2 .slick-slide img 92{ 93 display: block; 94} 95.slider2 .slick-slide.slick-loading img 96{ 97 display: none; 98} 99.slider2 .slick-slide.dragging img 100{ 101 pointer-events: none; 102} 103.slick-initialized .slick-slide 104{ 105 display: block; 106} 107.slider2 .slick-loading .slick-slide 108{ 109 visibility: hidden; 110} 111.slider2 .slick-vertical .slick-slide 112{ 113 display: block; 114 115 height: auto; 116 117 border: 1px solid transparent; 118} 119.slider2 .slick-arrow.slick-hidden { 120 display: none; 121} 122 123 124 125 126.slider2 { 127 position: relative; 128} 129 130.slider2 .slick-next { 131 position: absolute; 132 right: 0; 133 bottom: -30px; 134 135 font-size: 0; 136 line-height: 0; 137 width: 3.8rem; 138 height: 3.8rem; 139 border-radius: 50%; 140 display: block; 141 padding: 0; 142 -webkit-transform: translate(0, -50%); 143 -ms-transform: translate(0, -50%); 144 transform: translate(0, -50%); 145 cursor: pointer; 146 color: transparent; 147 border: none; 148 outline: none; 149 background: transparent; 150 border: 1px solid #0088c4; 151 padding-top: 3px; 152} 153 154.slider2 .slick-next::before { 155 content: ""; 156 position: absolute; 157 top: 50%; 158 left: 52%; 159 bottom: 0; 160 content: ""; 161 vertical-align: middle; 162 width: 8px; 163 height: 13px; 164 transform: translate(-50%, -50%); 165 background: url(../images/slick-next-arrow.svg) 0 0 no-repeat; 166 transition: 0.3s; 167} 168 169 170 171 .slider2 .slick-prev { 172 position: absolute; 173 right: 100px; 174 bottom: -30px; 175 176 font-size: 0; 177 line-height: 0; 178 width: 3.8rem; 179 height: 3.8rem; 180 border-radius: 50%; 181 display: block; 182 padding: 0; 183 -webkit-transform: translate(0, -50%); 184 -ms-transform: translate(0, -50%); 185 transform: translate(0, -50%); 186 cursor: pointer; 187 color: transparent; 188 border: none; 189 outline: none; 190 background: transparent; 191 border: 1px solid #0088c4; 192 padding-top: 3px; 193 } 194 195 .slider2 .slick-prev::before { 196 content: ""; 197 position: absolute; 198 top: 50%; 199 left: 48%; 200 bottom: 0; 201 content: ""; 202 vertical-align: middle; 203 width: 8px; 204 height: 13px; 205 transform: translate(-50%, -50%); 206 background: url(../images/slick-prev-arrow.svg) 0 0 no-repeat; 207 transition: 0.3s; 208 } 209 210
js
1$('.slider2').slick({ 2 arrows: true, 3 slidesToShow:3, 4 centerMode: true, 5 prevArrow:'<div class="slick-prev">PREV</div>', 6 nextArrow:'<div class="slick-next">NEXT</div>', 7 infinite: false, 8 9 responsive:[ 10 { 11 breakpoint: 1024, 12 settings:{ 13 slidesToShow:3, 14 } 15 }, 16 { 17 breakpoint: 768, 18 settings:{ 19 slidesToShow:1, 20 } 21 }, 22 ] 23 })
失礼いたしました。まだ修正中でして、コード追記いたしました。
回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在回答されておられる方の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。
回答1件
0
ベストアンサー
とりあえず下記場所が全角です。
js
1// ↓ ↓ 2 prevArrow:'<div class=”slick-prev”>PREV</div>', 3 nextArrow:'<div class=”slick-next”>NEXT</div>',
また、slickはul要素であることを無視してdiv要素を間に挟む実装なので、HTMLの文法としてはおかしい状態になります。ul>liではなくdiv>divで組むほうが良いと思います。（挙動や見た目には影響無いのですが文法的にそうしたほうがよい、という話）
投稿2019/08/06 11:01
総合スコア69407
kei344様
いつも回答ありがとうございます。なんかclassが効いてないなーとは思ってたんですが、これだったんですね。divのアドバイスもありがとうございます！！divで組んでみます。（ ; ; ）
.slick-disabled の時のCSSが書かれていないので、それを書けばよいです。（slick-disabled は slick-prev slick-next と同じ要素に付与されます）
slick-disabledを追加したら解決しました！！(>_<) ありがとうございました！！
あなたの回答
tips
プレビュー
