現象
親要素にCSSグリッドレイアウトを使用していて子要素をslickでカルーセルにしたら、カルーセルの大きさがとんでもないことになった。
index.html
<divclass="grid"><h2class="title">hoge</h2><ulid="slick"class="slider"><liclass="slide"></li><liclass="slide"></li><liclass="slide"></li><liclass="slide"></li><liclass="slide"></li></ul></div>style.css
.grid{display:grid;grid-template:"title"auto"slider"auto/auto;}.title{grid-area:title;}.slider{grid-area:slider;}script.js
$('#slick').slick({autoplay:true,autoplaySpeed:3000,arrows:true,dots:true,draggable:true,infinite:true,slidesToScroll:1,slidesToShow:3})解決策
- column幅を
minmax(0, 1fr) - slickの要素に
max-width: 100%; min-width: 0px; - slickのオプションに
row:0を渡す
style.css
.grid{display:grid;grid-template:"title"auto"slider"auto/minmax(0,1fr);/* 変更 */}.slider{grid-area:slider;max-width:100%;/* 追加 */min-width:0px;/* 追加 */}script.js
$('#slick').slick({autoplay:true,autoplaySpeed:3000,arrows:true,dots:true,draggable:true,infinite:true,slidesToScroll:1,slidesToShow:3,row:0//追加})参考
Grid of Sliders - CSS Grid + Slick
Slick not working with CSS grids fr-units (fractions) · Issue #2959 · kenwheeler/slick · GitHub
slick - the last carousel you'll ever need