こちらで同じ質問があり解決されているのですが、解決された方法ではうまく表示しませんでした。
(https://teratail.com/questions/114510
「slick.jsの左右画像が見えるスライダーで左右で見える画像幅を変えたい」)
【左右に見えている画像幅が同じ設定】
html
1<div class="FFF"> 2<div><a href="#"><img src="./img/img01.jpg"></a></div> 3<div><a href="#"><img src="./img/img02.jpg"></a></div> 4<div><a href="#"><img src="./img/img03.jpg"></a></div> 5<div><a href="#"><img src="./img/img04.jpg"></a></div> 6<div><a href="#"><img src="./img/img05.jpg"></a></div> 7</div><!-- ./FFF-->
css
1.FFF{ 2 width: 100%; 3}
javascript
1$(function() { 2 $('.FFF').slick({ 3 autoplay: true, 4 arrows: false, 5 centerMode: true, 6 centerPadding: '15%', 7 dots:true, 8 focusOnSelect:true, 9}); 10});
【解決方法を試したところ】
スライダーのドットは表示されていますが、本来画像が表示される個所が空白となりました。
slickの要素の外側を囲う要素に幅を付けてoverflow: hidden;で消してしまう方法もあります。
とご回答されていましたので、そちも試しましたが同じ結果でした。
css
1.FFF{ 2 width: 100%; 3} 4.slick-slide { 5 width: 50px !important; 6} 7.slick-slide.slick-current { 8 width: 300px !important; 9} 10.slick-slide.slick-current + .slick-slide { 11 width: 100px !important; 12}
javascript
1$(function() { 2 $('.FFF').slick({ 3 autoplay: true, 4 arrows: false, 5 centerMode: true, 6 //centerPadding: '15%', 7 dots:true, 8 focusOnSelect:true, 9}); 10});
他に設定する箇所があるのでしょうか?
画面幅いっぱいに表示したいので「width: 100%;」にしていますがこちらを「width: 450px;」にすると画面左端から450px分に5枚の画像が50px,50px,50px,50px,300pxくらいに短冊のように表示されました…
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/24 10:47