Webサイトでスライダー（カルーセル）を実装する際、「スマホではスライダーを表示したいが、PCでは静的なレイアウトにしたい」といったニーズはよくあります。今回は、Swiperと window.matchMedia を組み合わせて、画面サイズに応じて動的にSwiperの有効・無効を切り替える方法を段階的に解説します。
実装のゴール
| 画面幅 | 表示レイアウト | Swiperの動作 |
|---|---|---|
| 768px未満 | スライダー表示（Swiper有効） | 有効 |
| 768px以上 | 横並びの静的レイアウト | 無効 |
1. 基本の構成：Swiperを画面幅で切り替える
まずは、スマホでSwiperを有効化し、PCでは破棄する基本の実装です。
HTML（Swiperの構造）
<div class="swiper-container js-my-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">スライド1</div>
<div class="swiper-slide">スライド2</div>
<div class="swiper-slide">スライド3</div>
</div>
</div>JavaScript
let mySwiper = null;
const mediaQuery = window.matchMedia('(max-width: 767px)');
function initSwiper() {
if (!mySwiper) {
mySwiper = new Swiper('.js-my-swiper', {
slidesPerView: 1,
spaceBetween: 10,
loop: true,
});
}
}
function destroySwiper() {
if (mySwiper) {
mySwiper.destroy(true, true);
mySwiper = null;
}
}
function handleBreakpoint(e) {
if (e.matches)
initSwiper();
} else {
destroySwiper();
}
}
handleBreakpoint(mediaQuery);
mediaQuery.addEventListener('change', handleBreakpoint);2. PCでは静的レイアウトに切り替える
Swiperだけでなく、PCでは静的な横並びのブロックにレイアウトを切り替える例です。
HTML（Swiperと静的レイアウトを両方用意）
<!-- スライダー：スマホ用 -->
<div class="swiper-container js-my-swiper" data-role="slider">
<div class="swiper-wrapper">
<div class="swiper-slide">アイテム1</div>
<div class="swiper-slide">アイテム2</div>
<div class="swiper-slide">アイテム3</div>
</div>
</div>
<!-- 静的レイアウト：PC用 -->
<div class="static-layout" data-role="static">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>CSS（表示の切り替え）
[data-role="slider"],
[data-role="static"] {
display: none;
}
@media (max-width: 767px) {
[data-role="slider"] {
display: block;
}
}
@media (min-width: 768px) {
[data-role="static"] {
display: flex;
gap: 16px;
}
.static-layout .item {
flex: 1;
background: #eee;
padding: 16px;
text-align: center;
}
}
3. HTMLを共通化してJSで動的に切り替える
HTML構造をSwiper用と静的レイアウト用に分けると、同じデータを重複して書くことになるというデメリットがあります。これを避けるために、共通のアイテムリストから、JSでSwiper構造／静的構造に変換する方法を紹介します。
HTML（共通のリストのみ）
<div id="item-container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>CSS（共通アイテムと静的レイアウト用）
.item {
background: #eee;
padding: 16px;
text-align: center;
}
.static-layout {
display: flex;
gap: 16px;
}
.swiper-container {
width: 100%;
}
JavaScript（DOM変換とSwiper初期化）
let mySwiper = null;
const container = document.getElementById('item-container');
const mediaQuery = window.matchMedia('(max-width: 767px)');
let currentLayout = null;
function setupSwiperLayout() {
if (currentLayout === 'swiper') return;
const wrapper = document.createElement('div');
wrapper.classList.add('swiper-wrapper');
[...container.children].forEach((item) => {
const slide = document.createElement('div');
slide.classList.add('swiper-slide');
slide.appendChild(item);
wrapper.appendChild(slide);
});
container.innerHTML = '';
const swiperEl = document.createElement('div');
swiperEl.classList.add('swiper-container');
swiperEl.appendChild(wrapper);
container.appendChild(swiperEl);
mySwiper = new Swiper('.swiper-container', {
slidesPerView: 1.2,
spaceBetween: 10,
loop: true,
});
currentLayout = 'swiper';
}
function setupStaticLayout() {
if (currentLayout === 'static') return;
if (mySwiper) {
mySwiper.destroy(true, true);
mySwiper = null;
}
const items = [];
container.querySelectorAll('.swiper-slide .item').forEach((item) => {
items.push(item);
});
container.innerHTML = '';
const staticLayout = document.createElement('div');
staticLayout.classList.add('static-layout');
items.forEach((item) => staticLayout.appendChild(item));
container.appendChild(staticLayout);
currentLayout = 'static';
}
function handleResize(e) {
if (e.matches) {
setupSwiperLayout();
} else {
setupStaticLayout();
}
}
handleResize(mediaQuery);
mediaQuery.addEventListener('change', handleResize);
