swiperを使ってスライダーを爆速で作ろう!
Share
こんなことを説明しています!
- 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にスニペットを登録する際に赤字でエラーが出るかと思いますが、問題なく動くので大丈夫です!