slickを使用してスライダーを実装しています。
https://tr.you84815.space/slick/settings/lazyLoad.html
目指してるものはこの方のprogressiveに近いです。
activeの猫の画像だけ表示したいため以下のcssを入れたのですが挙動が少し気持ち悪いため諦めました。
scss
1.slick-track{ 2 visibility: hidden; 3} 4.slick-current{ 5 visibility: visible; 6}
何か良い方法はあるでしょうか?よろしくお願い致します。
jQuery
1 $('.slider01').slick({ 2 slidesToShow: 1, 3 prevArrow: '<button class="slick-prev"></button>', 4 nextArrow: '<button class="slick-next"></button>', 5 dots: true, 6 dotsClass: 'dot-class', 7 lazyLoad: 'progressive', 8 9 customPaging: function(slick,index) { 10 // スライダーのインデックス番号に対応した画像のsrcを取得 11 var targetImage = slick.$slides.eq(index).find('img').attr('src'); 12 // slick-dots > li の中に上記で取得した画像を設定 13 return '<img src=" ' + targetImage + ' "/>'; 14 }, 15 });
scss
1 ul { 2 .slick-list { 3 background-color: #182a3d; 4 height: 300px; 5 margin-bottom: 8px; 6 } 7 // .slick-track{ 8 // visibility: hidden; 9 // } 10 // .slick-current{ 11 // visibility: visible; 12 // } 13 .dot-class{ 14 text-align: left; 15 padding: 0 0 0 8px; 16 li{ 17 width: 70px; 18 height: 70px !important; 19 position: relative; 20 background-color: #dbdbdb; 21 display: inline-block; 22 margin-right: 8px; 23 -webkit-filter: brightness(0.4); 24 -moz-filter: brightness(0.4); 25 -o-filter: brightness(0.4); 26 -ms-filter: brightness(0.4); 27 filter: brightness(0.4); 28 img{ 29 position: absolute; 30 max-height: 100% !important; 31 max-width: 100% !important; 32 top: 0; 33 bottom: 0; 34 left: 0; 35 right: 0; 36 margin: auto; 37 } 38 } 39 .slick-active{ 40 -webkit-filter: brightness(1.0); 41 -moz-filter: brightness(1.0); 42 -o-filter: brightness(1.0); 43 -ms-filter: brightness(1.0); 44 filter: brightness(1.0); 45 } 46 } 47 .slick-prev 48 { 49 left: 14.5%; 50 top: 44%; 51 } 52 .slick-next 53 { 54 left: 41%; 55 top: 44%; 56 } 57 &.slider01 li { 58 // /*メインスライダー*/ 59 display: inline-block; 60 height: 300px; 61 position: relative; 62 img { 63 max-height: 300px; 64 max-width: 390px; 65 position: absolute; 66 top: 0; 67 right: 0; 68 bottom: 0; 69 left: 0; 70 margin: auto; 71 } 72 }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/10 05:30 編集