Ryo Blog

〜WEB制作をスキルに〜

swiperを使ってスライダーを爆速で作ろう！

2023.11.09

こんなことを説明しています！

CDNを使うより、ダウンロードファイルを使った方が良い
swiperを使ったスライダーを爆速で作る方法 / スニペット

解説動画

コードとスニペット

CDNよりダウンロードファイルを使うべき！

こちらのNotionに私が毎回使っている swiper-bundle.min.js や swiper-bundle.min.cssを入れておきましたので、新しくcssファイルとjsファイルを作成し、そこにコピペして使ってください！

こちらからダウンロードしてください

CDNだと、アップデートの際にcssが変わったりしてしまう可能性があるので、ダウンロードファイルを使用するのが良いと思います！

HTMLコードとスニペット

実際に使用したコードはこちら

<div class="swiper-container">
    <div class="swiper p-swiper__test">
        <div class="swiper-wrapper">
            <div class="swiper-slide p-test__slide">
                <!-- スライドの中身 -->
                <img src='./img/img1.jpg' alt='画像' width='400' height='200' loading='lazy'>
            </div>
            <div class="swiper-slide p-test__slide">
                <!-- スライドの中身 -->
                <img src='./img/img2.jpg' alt='画像' width='400 height='200' loading='lazy'>
            </div>
            <div class="swiper-slide p-test__slide">
                <!-- スライドの中身 -->
                <img src='./img/img3.jpg' alt='画像' width='400' height='200' loading='lazy'>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

swiperは型が決まっておりますので、スニペット登録をしておくと良いかと思います！

スニペット登録用↓↓

html.json
"swiper": {
    "prefix": "swiper",
    "body": [
        "<div class=\"swiper-container\">",
        "    <div class=\"swiper p-swiper__$1\">",
        "        <div class=\"swiper-wrapper\">",
        "            <div class=\"swiper-slide p-$1__slide\">",
        "                <!-- スライドの中身 -->",
        "                ",
        "            </div>",
        "        </div>",
        "    </div>",
        "    <div class=\"swiper-pagination\"></div>",
        "    <div class=\"swiper-button-prev\"></div>",
        "    <div class=\"swiper-button-next\"></div>",
        "</div>",
    ],
    "description": ""
},

JavaScriptのコードとスニペット

const mySwiper = new Swiper('.p-swiper__test', { //名前を変える
    loop: true, //最後→最初に戻るループ再生を有効に
    autoplay: { 
        delay: 3000, //何秒ごとにスライドを動かすか
        stopOnLastSlide: false, //最後のスライドで自動再生を終了させるか
        disableOnInteraction: true, //ユーザーの操作時に止める
        reverseDirection: false, //自動再生を逆向きにする
    },
    speed: 1000, //表示切り替えのスピード
    effect: "slide", //切り替えのmotion (※1)
    centeredSlides: true, //中央寄せ
    pagination: {
        el: ".swiper-pagination", //paginationのclass
        clickable: true, //クリックでの切り替えを有効に
        //type: "progressbar" //paginationのタイプ (※2)
    },
    navigation: {
        prevEl: ".swiper-button-prev", //戻るボタンのclass
        nextEl: ".swiper-button-next" //進むボタンのclass
    },
    scrollbar: { //スクロールバーを表示したいとき
        el: ".swiper-scrollbar", //スクロールバーのclass
        hide: true, //操作時のときのみ表示
        draggable: true //スクロールバーを直接表示できるようにする
    },
    allowTouchMove: false, // スワイプで表示の切り替えを無効に
    slidesPerView: 3, // 一度に表示する枚数
    breakpoints: { //画面幅による表示枚数と余白の指定
        320: {
            slidesPerView: 1,
            spaceBetween: 10,
        },
        375: {
            slidesPerView: 1.2,
            spaceBetween: 15,
        },
        600: {
            slidesPerView: 1.2,
            spaceBetween: 15,
        },
        1025: {
            slidesPerView: 1.2,
            spaceBetween: 20,
        },
        1500: {
            slidesPerView: 1.2,
            spaceBetween: 20,
        },
    }
});

/* =================================================== 
※1 effectについて
slide：左から次のスライドが流れてくる
fade：次のスライドがふわっと表示
■ fadeの場合は下記を記述
    fadeEffect: {
        crossFade: true
    },
cube：スライドが立方体になり、3D回転を繰り返す
coverflow：写真やアルバムジャケットをめくるようなアニメーション
flip：平面が回転するようなアニメーション
cards：カードを順番にみていくようなアニメーション
creative：カスタマイズしたアニメーションを使うときに使用します

=======================================================
※2 paginationのタイプ
bullet：スライド枚数と同じ数のドットが表示
fraction：分数で表示（例：1 / 3）
progressbar：スライドの進捗に応じてプログレスバーが伸びる
custom：自由にカスタマイズ

=====================================================*/

スニペット登録用↓↓

javascript.json
"swiper": {
    "prefix": "swiper",
    "body": [
        "const mySwiper = new Swiper('.p-swiper__xxx', { //名前を変える",
        "    loop: true, //最後→最初に戻るループ再生を有効に",
        "    autoplay: { ",
        "        delay: 3000, //何秒ごとにスライドを動かすか",
        "        stopOnLastSlide: false, //最後のスライドで自動再生を終了させるか",
        "        disableOnInteraction: true, //ユーザーの操作時に止める",
        "        reverseDirection: false, //自動再生を逆向きにする",
        "    },",
        "    speed: 1000, //表示切り替えのスピード",
        "    effect: \"slide\", //切り替えのmotion (※1)",
        "    centeredSlides: true, //中央寄せ",
        "    pagination: {",
        "        el: \".swiper-pagination\", //paginationのclass",
        "        clickable: true, //クリックでの切り替えを有効に",
        "        type: \"progressbar\" //paginationのタイプ (※2)",
        "    },",
        "    navigation: {",
        "        prevEl: \".swiper-button-prev\", //戻るボタンのclass",
        "        nextEl: \".swiper-button-next\" //進むボタンのclass",
        "    },",
        "    scrollbar: { //スクロールバーを表示したいとき",
        "        el: \".swiper-scrollbar\", //スクロールバーのclass",
        "        hide: true, //操作時のときのみ表示",
        "        draggable: true //スクロールバーを直接表示できるようにする",
        "    },",
        "    allowTouchMove: false, // スワイプで表示の切り替えを無効に",
        "    slidesPerView: 3, // 一度に表示する枚数",
        "    breakpoints: { //画面幅による表示枚数と余白の指定",
        "        320: {",
        "            slidesPerView: 1,",
        "            spaceBetween: 10,",
        "        },",
        "        375: {",
        "            slidesPerView: 1.2,",
        "            spaceBetween: 15,",
        "        },",
        "        600: {",
        "            slidesPerView: 1.2,",
        "            spaceBetween: 15,",
        "        },",
        "        1025: {",
        "            slidesPerView: 2,",
        "            spaceBetween: 20,",
        "        },",
        "        1500: {",
        "            slidesPerView: 3,",
        "            spaceBetween: 20,",
        "        },",
        "    }",
        "});",
        "",
        "/* =================================================== ",
        "※1 effectについて",
        "slide：左から次のスライドが流れてくる",
        "fade：次のスライドがふわっと表示",
        "■ fadeの場合は下記を記述",
        "    fadeEffect: {",
        "        crossFade: true",
        "    },",
        "cube：スライドが立方体になり、3D回転を繰り返す",
        "coverflow：写真やアルバムジャケットをめくるようなアニメーション",
        "flip：平面が回転するようなアニメーション",
        "cards：カードを順番にみていくようなアニメーション",
        "creative：カスタマイズしたアニメーションを使うときに使用します",
        "",
        "=======================================================",
        "※2 paginationのタイプ",
        "bullet：スライド枚数と同じ数のドットが表示",
        "fraction：分数で表示（例：1 / 3）",
        "progressbar：スライドの進捗に応じてプログレスバーが伸びる",
        "custom：自由にカスタマイズ",
        "",
        "=====================================================*/",
    ],
    "description": ""
},

cssのコードとスニペット

.swiper-container {
    border: 1px solid blue;
    position: relative;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
}
.swiper {
    position: relative;
}
.swiper-wrapper {
    position: relative;
}

// ============================
//     pagination について
// ============================

//色と大きさ指定
.swiper-pagination-bullet {
    opacity: 1;
    background: gray;
    width: 20px;
    height: 20px;
    border-radius: 50%; //円にする
}
//activeなとき
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: red;
}
//paginationの余白指定
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 10px;
}
//paginationの位置
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}

//progressbarの場合
.swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal {
    top: calc(100% - 10px);
    height: 10px;
    background: gray;
}
//実際に変化する棒の色
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: red;
}

// ==============================
//     navigation について
// ==============================

.swiper-button-prev {
    //位置はここで指定
    // top: 50%;
    // transform: translateY(-50%);
    &::after {
        content: '';
        position: absolute;
        width: 20px;
        height: auto;
        aspect-ratio: 1;
        border-right: 2px solid red;
        border-bottom: 2px solid red;
        //配置, 回転
        transform: rotate(135deg);
    }
}

.swiper-button-next {
    //位置はここで指定
    // top: 50%;
    // transform: translateY(-50%);
    &::after {
        content: '';
        position: absolute;
        width: 20px;
        height: auto;
        aspect-ratio: 1;
        border-right: 2px solid red;
        border-bottom: 2px solid red;
        //配置, 回転
        transform: rotate(-45deg);
    }
}

スニペット登録用↓↓

scss.json
"swiper": {
    "prefix": "swiper",
    "body": [
        ".swiper-container {",
        "    position: relative;",
        "}",
        ".swiper {",
        "    position: relative;",
        "}",
        ".swiper-wrapper {",
        "    position: relative;",
        "}",
        "",
        "// ============================",
        "//     pagination について",
        "// ============================",
        "",
        "//色と大きさ指定",
        ".swiper-pagination-bullet {",
        "    opacity: 1;",
        "    background: gray;",
        "    width: 20px;",
        "    height: 20px;",
        "    border-radius: 50%; //円にする",
        "}",
        ".swiper-pagination-bullet.swiper-pagination-bullet-active {",
        "    background: red;",
        "}",
        "//paginationの余白指定",
        ".swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {",
        "    margin: 0 10px;",
        "}",
        "//paginationの位置",
        ".swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {",
        "    bottom: 0;",
        "    left: 50%;",
        "    transform: translateX(-50%);",
        "}",
        "",
        "//progressbarの場合",
        "// .swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal {",
        "//     top: calc(100% - 10px);",
        "//     height: 10px;",
        "//     background: gray;",
        "// }",
        "// //実際に変化する棒の色",
        "// .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {",
        "//     background: red;",
        "// }",
        "",
        "// ==============================",
        "//     navigation について",
        "// ==============================",
        "",
        ".swiper-button-prev {",
        "    //位置はここで指定",
        "    // top: 50%;",
        "    // transform: translateY(-50%);",
        "    &::after {",
        "        content: ''; //デフォルトの削除",
        "    }",
        "}",
        "",
        ".swiper-button-next {",
        "    //位置はここで指定",
        "    // top: 50%;",
        "    // transform: translateY(-50%);",
        "    &::after {",
        "        content: ''; //デフォルトの削除",
        "    }",
        "}",
    ],
    "description": ""
},

補足

サムネイルのような画像のスライドにしたい場合は、script.jsの中の effect: slide を effect:coverflow に変えると実装ができます！

また、VScodeのjsonにスニペットを登録する際に赤字でエラーが出るかと思いますが、問題なく動くので大丈夫です！

記事一覧へ

りょー｜29歳フリーランス｜LPコーディング、WordPressサイト構築、ディレクション、Shopify (Liquid編集) を中心に活動しております！

完全未経験からWEB業界に入り
デイトラで3ヶ月間学習
営業開始後4日→ゼロイチ達成
開業3ヶ月後→月収50万達成
その後平均月収50万 (最高月収120万円)

WEBで独立したい！未経験からでもフリーランスになりたい！そんな方々のためになるような情報をこのブログを通して発信します！

私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓

Products

Coming Soon

HP制作のご依頼

現在エンドクライアント様向けの事業サイトを作成中です。

WEB制作業務委託
のご依頼

LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！約1年間で80サイト以上作成をしてきました。LP制作最短2日で納品！
詳しくは、ポートフォリオをご覧ください。

コンテンツ

Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。

カートにアイテムが追加されました

Ryo Blog

swiperを使ってスライダーを爆速で作ろう！

解説動画

コードとスニペット

CDNよりダウンロードファイルを使うべき！

HTMLコードとスニペット

JavaScriptのコードとスニペット

cssのコードとスニペット

補足

Category

Tag

X

Youtube

About

Products