jQueryのslickSlideで700px以下の場合非表示にしたい
解決したいこと
display: none;で非表示にした際、レイアウトが崩れてしまう。
レイアウトが崩れないように対応したい。
slide-show.js
$('.worksSliderBottom').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 0,
speed: 6900,
infinite: true,
pauseOnHover: false,
pauseOnFocus: false,
cssEase: 'linear',
slidesToShow: 4,
slidesToScroll: 1,
rtl: true,
responsive: [
{
breakpoint: 2560,
settings: {
slidesToShow: 4,
}
},
{
breakpoint: 2000,
settings: {
slidesToShow: 3.5,
}
},
{
breakpoint: 1500,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 1250,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 1000,
settings: {
display: none,
}
},
{
breakpoint: 850,
settings: {
slidesToShow: 1.3,
}
},
{
breakpoint: 800,
settings: {
slidesToShow: 1.3,
}
}
],
});
container.css
.worksSliderBottom {
display: none;
}
.worksSliderBottom li {
display: none;
}
.worksSliderBottom img {
display: none;
}
.worksSliderBottom .slick-slide {
display: none;
}
<ul class="worksSliderBottom" dir="rtl">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
やりたいこと
上下にslick-slideがあり、下部のslickのみを700px以下の場合非表示にしたい。
画面
改修前
700px超え
700px以下
改修後
700px超え
700px以下
最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたら教えていただけますと幸いです。
何卒よろしくお願いいたします。
0
