前提
slick.js の centerMode を利用して、
表示する要素が3つ slidesToShow: 3 のスライダーを作っています。
3つのうち、両サイド2つは表示透明度を下げて、.slick-center のクラスが付く、真ん中の要素のみ目立つよう設定しています。
< □ ■ □ > こんな感じ。
発生している問題・エラーメッセージ
スライド要素が4つ以上登録されている場合は、正常に機能しますが
3つ以下(必要な要素はすべて表示されている状態)になると表示が崩れてしまいます。
具体的には、.slick-center クラスが付く要素が真ん中ではなく両端になってしまい、
ほか2つの要素は半透明になります。
また、prev, next のボタンが出す、autoplay も動きません。
■ □ ■ こんな感じ。
要素が全て表示されている状態になるので、スライドとしては動作しなくても問題ありません。
ただ、見た目がおかしいので、要素が3つ以下の場合は=すべての透明度を100%にする。という挙動にしたいのですが、どうすれば良いでしょうか?
■ ■ ■ こんな感じ。
該当のソースコード
html
1<div class="slider"> 2 <div><a href="#"><img src="#"></a></div> 3 <div><a href="#"><img src="#"></a></div> 4 <div><a href="#"><img src="#"></a></div> 5 <!-- 3つ以下にすると表示が崩れる div><a href="#"><img src="#"></a></div --> 6</div>
js
1$(document).ready(function(){ 2 $('.slider').slick({ 3 centerMode: true, 4 centerPadding: '10px', 5 slidesToShow: 3, 6 autoplay: true, 7 autoplaySpeed: 3000, 8 }); 9});
css
1.slick-slide:not(.slick-center) { 2 opacity: .5; 3}
試したこと
js に if 文書く?
さっぱり見当がつきません…
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/14 09:10