- 2020年7月8日
- 2020年7月8日
swiper.jsを使って全画面切替のページを制作する方法
jsのプラグイン「swiper.js」を使用して全画面切替のページを制作する方法のメモ
swiper.jsを使用する準備
本家サイトからダウンロードするかcdnで読み込む
cdnで読み込む場合
https://cdnjs.com/libraries/Swiperにアクセスし、
- https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js
- https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css
を読み込む
htmlとcss
html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide no1">
<div class="in move">
<div class="in size">
<p>Slide <strong>1</strong></p>
</div>
</div>
</div>
<div class="swiper-slide no2">
<div class="in move">
<div class="in size">
<p>Slide <strong>2</strong></p>
</div>
</div>
</div>
<div class="swiper-slide no3">
<div class="in move">
<div class="in size">
<p>Slide <strong>3</strong></p>
</div>
</div>
</div>
</div>
<!-- ページャー-->
<div class="swiper-pagination"></div>
</div>
基本構成は
- .swiper-container
- .swiper-wrapper
- .swiper-slide
の3つ
今回は「.swiper-slide」にクラスで番号をつけている
「.swiper-slide」内はお好みで
css
.swiper-container {
height: 100vh;
}
.swiper-container .swiper-wrapper {
transition-timing-function: cubic-bezier(0.685, 0.09, 0.1, 0.94);
}
.swiper-container .swiper-slide .in {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.swiper-container .swiper-slide .in.move {
transform: translate(30%, -100%);
transition: 1.1s 0.1s;
transition-timing-function: cubic-bezier(0.685, 0.09, 0.1, 0.94);
}
.swiper-container .swiper-slide .in.size {
flex-direction: column;
transform: scale(0.6);
transition: 1.0s;
}
.swiper-container .swiper-slide .in p {
font-size: 5.0rem;
opacity: 0;
transition: 0.8s 1.2s;
}
.swiper-container .swiper-slide .in strong {
font-size: 3.0em;
}
.swiper-container .swiper-slide.swiper-slide-next .in.move {
transform: translate(-30%, 100%);
}
.swiper-container .swiper-slide.swiper-slide-active .in.move {
transform: translate(0);
}
.swiper-container .swiper-slide.swiper-slide-active .in.size {
transform: scale(1);
}
.swiper-container .swiper-slide.swiper-slide-active .in p {
opacity: 1;
transform: translate(0) !important;
}
.swiper-container .swiper-slide.no1 .in.size {
background-color: #f00;
}
.swiper-container .swiper-slide.no1 .in p {
transform: translate(0, 30%);
}
.swiper-container .swiper-slide.no2 .in.size {
background-color: #0f0;
}
.swiper-container .swiper-slide.no2 .in p {
transform: translate(100%, 0);
}
.swiper-container .swiper-slide.no3 .in.size {
background-color: #00f;
}
.swiper-container .swiper-slide.no3 .in p {
transform: scale(0.2);
}
スライド1枚を1画面にする
js
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: false,
speed: 1200,
effect: "fade",
virtualTranslate: true,
preventInteractionOnTransition: true,
followFinger: false,
mousewheel: {
invert: false
},
pagination: {
el: '.swiper-pagination',
}
});
mySwiper.on('slideChangeTransitionEnd', function () {
console.log("slide" + (Number(this.activeIndex) + 1));
});
- virtualTranslate
- trueにすると.swiper-wrapperのtransformが削除される(多分effect: “fade”ではあまり関係無い)
- preventInteractionOnTransition
- trueにすると、移行中にスワイプまたはナビゲーション/ページネーションボタンでスライドを変更出来ない
- followFinger
- falseのとき、タッチを離したときにスライドが動く。ホールドしている間はアニメーションさせないようにできる
- mousewheel
- PC時にマウスホイールで動かせるようにする
まとめ
swiper.jsを使用すれば全画面スライドのページが作れる
ブログによって載せられているオプションが違かったりするので、自分の環境でやりたいことが出来ない時は、別のオプションを使用したり色々試した方が良い
デモ