swiperを使用することは多いのですが、サイト全体だと、いくつものsliderを作成するシーンなどありませんか？
ただ、表示する枚数が異なったり、余白が微妙に違うだけで、インスタンスを作成するのは手間！
ということで、swiperを使いまわしできるように、インスタンスの作成部分を関数化にして、転用できるようにしました！
完成のソース
こちらが完成のソースです！
表示枚数、PCとSPでの表示枚数、センター表示、スライド間の幅のパラメータを渡せるようにしてます。
ソースの詳細は、後述します。
See the Pen Swiper共通化 by komame (@komame) on CodePen.
Swiperのインスタンスを作成する
まず、Swiperのインスタンスを作成します。
少しパラメーターをつけすぎたような気もしますが、だいたいこれくらいが変動するかなというものをつけてます。
const initSlider = (
slider,
sliderName = "js-swiper", //ボタンの矢印の名前用
index,
slideSpNumber, //sp時のスライダ表示枚数
slidePcNumber = 2.5, //pc時のスライダ表示枚数
sliderPosition = true, //スライダーをセンター表示させるか
sliderSpace = 28, // スライド間の余白（px）
) => {
return new Swiper(slider, {
loop: true,
slidesPerView: slideSpNumber,
spaceBetween: sliderSpace,
centeredSlides: sliderPosition,
breakpoints: {
540: {
slidesPerView: slidePcNumber,
},
},
navigation: {
nextEl: `#${sliderName}-next-${index + 1}`,
prevEl: `#${sliderName}-prev-${index + 1}`,
},
pagination: {
el: `#js-slider-pagination-${index + 1}`,
},
});
};パターン1のスライダー
パターン1のスライダー発火用の記述は、下記です。
const createSlider = () => {
const sliderElements = document.querySelectorAll(".js-swiper");
const prevButtons = document.querySelectorAll(".js-swiper-prev-button");
const nextButtons = document.querySelectorAll(".js-swiper-next-button");
if (sliderElements.length === 0) return;
prevButtons.forEach((prevButton, index) => {
prevButton.id = `js-swiper-prev-${index + 1}`;
});
nextButtons.forEach((nextButton, index) => {
nextButton.id = `js-swiper-next-${index + 1}`;
});
sliderElements.forEach((slider, index) => {
// それぞれのパラメータを付与
initSlider(slider, "js-swiper", index, 2, 4, false, 15);
});
};
createSlider();js-swiperというクラスを対象のスライダーは、下記で指定している感じに出力されます。
sp時のスライダ表示枚数は、2。
pc時のスライダ表示枚数は、4。
センター表示は、なし。
スライダー間の余白は、15pxです。
const sliderElements = document.querySelectorAll(“.js-swiper”);の要素をforEachでループさせて、indexで固有化させることで、上記の設定のスライダーを同ページに複数設置することができます。
initSlider(slider, "js-swiper", index, 2, 4, false, 15);パターン2のスライダー
パターン2のスライダー発火用の記述は、下記です。
const createSlider2 = () => {
const sliderElements = document.querySelectorAll(".js-swiper2");
const swiperName = "js-swiper2";
const prevButtons = document.querySelectorAll(".js-swiper-prev-button2");
const nextButtons = document.querySelectorAll(".js-swiper-next-button2");
if (sliderElements.length === 0) return;
prevButtons.forEach((prevButton, index) => {
prevButton.id = `${swiperName}-prev-${index + 1}`;
});
nextButtons.forEach((nextButton, index) => {
nextButton.id = `${swiperName}-next-${index + 1}`;
});
sliderElements.forEach((slider, index) => {
// それぞれのパラメータを付与
console.log(slider);
initSlider(slider, swiperName, index, 2, 1.5, true, 24);
});
};
createSlider2();js-swiper2というクラスを対象のスライダーは、下記で指定している感じに出力されます。
sp時のスライダ表示枚数は、2。
pc時のスライダ表示枚数は、1.5。
センター表示、あり
スライダー間の余白は、24pxです。
initSlider(slider, swiperName, index, 2, 1.5, true, 24);
