<aside> <img src="https://cdn-icons-png.flaticon.com/128/6687/6687986.png" alt="https://cdn-icons-png.flaticon.com/128/6687/6687986.png" width="40px" /> 各ページへのリンク
</aside>
参考動画
https://www.youtube.com/watch?v=oNYO-1vo48U&feature=youtu.be
参考記事
コード
html.json
"swiper": {
"prefix": "swiper",
"body": [
"<div class=\\"swiper-container\\">",
" <div class=\\"swiper\\">",
" <div class=\\"swiper-wrapper\\">",
" <div class=\\"swiper-slide\\">",
" <!-- スライドの中身 -->",
" ",
" </div>",
" </div>",
" </div>",
" <div class=\\"swiper-pagination\\"></div>",
" <div class=\\"swiper-button-prev\\"></div>",
" <div class=\\"swiper-button-next\\"></div>",
"</div>",
],
"description": "swiperの型(html)"
},
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": "swiperの型(css)"
},
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": "swiperの型(javascript)"
},