くまだどうも、くまだです。
splideでスライド枚数が少ないときの処理のメモ。
スライド枚数が少ないときの処理
splideはスライダーライブラリのひとつです。
splideを使うときは以下のコードをheadタグに記述します。
<script src="
" defer></script>
<link href="
" rel="stylesheet">コードは以下になります。
<div class="container">
<div class="contents">
<div class="splide js-slide">
<div class="splide__track">
<div class="splide__list">
<div class="splide__slide">
<div class="item">1</div>
</div>
<div class="splide__slide">
<div class="item">2</div>
</div>
<div class="splide__slide">
<div class="item">3</div>
</div>
<div class="splide__slide">
<div class="item">4</div>
</div>
</div>
</div>
</div>
</div>
</div>.splide {
width: 100%;
overflow: hidden;
}
.splide__track {
width: 100%;
}
.splide__list {
display: flex;
align-items: center;
}
.splide__slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.item {
width: 300px;
height: 300px;
background-color: orange;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.item:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.splide:not(.is-overflow) {
visibility: visible;
}
.splide:not(.is-overflow) .splide__list {
gap: 16px;
justify-content: center;
}
/* PC用スタイル */
@media (min-width: 768px) {
.item {
width: 300px;
height: 300px;
}
}
/* モバイル用スタイル */
@media (max-width: 767px) {
.item {
width: 280px;
height: 280px;
}
}
.container {
padding: 40px;
overflow: hidden;
}
.contents {
width: 100vw;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}document.addEventListener("DOMContentLoaded", function () {
initSlider();
});
function initSlider() {
const sliderRoot = document.querySelector(".js-slide");
if (!sliderRoot) return;
const slideContents = sliderRoot.querySelectorAll(".splide__slide");
const slideLength = slideContents.length;
const windowWidth = window.innerWidth;
const isMobile = windowWidth <= 767;
if (isMobile) {
if (slideLength < 2) {
// 既存のSplideインスタンスがあれば破棄
if (sliderRoot.__splide__) {
sliderRoot.__splide__.destroy();
}
return;
}
} else {
// PC: 4枚未満のときはSplideを作らない
if (slideLength < 4) {
// 既存のSplideインスタンスがあれば破棄
if (sliderRoot.__splide__) {
sliderRoot.__splide__.destroy();
}
return;
}
}
//メインスライド
let options = {
type: "loop",
gap: "32px",
autoWidth: true,
autoHeight: false,
perPage: 1,
speed: 500,
autoplay: true,
interval: 5000,
pauseOnHover: false,
pauseOnFocus: false,
perMove: 1,
breakpoints: {
767: {
focus: "center",
gap: "8px",
padding: {
left: "21px",
right: "21px",
},
},
},
};
const splide = new Splide(".js-slide", options);
splide.mount();
// リサイズ時の処理
let resizeTimer;
window.addEventListener("resize", function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
if (sliderRoot.__splide__) {
sliderRoot.__splide__.destroy();
}
initSlider();
}, 250);
});
}
See the Pen スライド少ないときの処理（splide） by kuma0605 (@kuma0605) on CodePen.
個々のオプションについては省きますが、今回の肝の部分は以下のコード。
const slideContents = sliderRoot.querySelectorAll(".splide__slide");
const slideLength = slideContents.length;
const windowWidth = window.innerWidth;
const isMobile = windowWidth <= 767;
if (isMobile) {
if (slideLength < 2) {
// 既存のSplideインスタンスがあれば破棄
if (sliderRoot.__splide__) {
sliderRoot.__splide__.destroy();
}
return;
}
} else {
// PC: 4枚未満のときはSplideを作らない
if (slideLength < 4) {
// 既存のSplideインスタンスがあれば破棄
if (sliderRoot.__splide__) {
sliderRoot.__splide__.destroy();
}
return;
}
}以下の部分で、スライド枚数と画面幅を取得しています。
const slideContents = sliderRoot.querySelectorAll(".splide__slide");
const slideLength = slideContents.length;
const windowWidth = window.innerWidth;
const isMobile = windowWidth <= 767;スマホ（767px幅以下）のときはスライド枚数が1枚のときはスライダーにしない（destroy()で破棄）。
if (isMobile) {
if (slideLength < 2) {
// 既存のSplideインスタンスがあれば破棄
if (sliderRoot.__splide__) {
sliderRoot.__splide__.destroy();
}
return;
}
} PC画面のときは、4枚未満のときはスライダーを作らない。
} else {
if (slideLength < 4) {
if (sliderRoot.__splide__) {
sliderRoot.__splide__.destroy();
}
return;
}
}スライダーにしないときは、要素が画面に表示されないので、スライドしないときのCSSも合わせて書きます。
.splide:not(.is-overflow) {
visibility: visible;
}
.splide:not(.is-overflow) .splide__list {
gap: 16px;
justify-content: center;
}
ここまで読んでくださりありがとうございました。