7.5から続きます
ヒーロースライダーを作成する
作成するもの
こちらでSwiperを利用する(今回はswiper.min.jsを利用)
https://swiperjs.com/get-started
導入方法
HTMLに記述を追加することと下をコピー&ペースト
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>CSSにこれも追加すること
.swiper {
width: 600px;
height: 300px;
}SCSSの記述
@import "mixin"; $cWhite: white; @import 'hero-slider';
main.jsの記述
document.addEventListener('DOMContentLoaded', function () {
// newでインスタンス化
const hero = new HeroSlider('.swiper-container');
hero.start();
});
HTMLの記述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="global-container">
<div id="container">
<div id="content">
<!-- 今回の重要な部分 -->
<div class="hero"></div>
<!-- スライダーメインコンテナ -->
<div class="swiper-container">
<!-- ラッパー -->
<div class="swiper-wrapper">
<!-- スライドの部分 -->
<div class="swiper-slide">
<!-- 画像の真ん中の文字 -->
<div class="hero__title">Enjoy Rich</div>
<image src="images/Dahlia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Fantastic</div>
<image src="images/Gaillardia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Experience</div>
<image src="images/Geranium.jpg" alt=""></image>
</div>
</div>
<div class="hero__footer">
<!-- ↓矢印の部分 -->
<img class="hero__downarrow" src="images/arrow.svg" />
<span class="hero__scrolltext">scroll</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="hero-slider.js"></script>
<script src="main.js"></script>
</body>
</html>
_hero-slider.scss
.swiper-container {
overflow: visible !important;
}
.swiper-slide {
height: 500px;
// 拡大してはみ出た部分を表示しない
overflow: hidden;
& > img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
// 拡大する
transform: scale(1.3);
transition: transform 1.9s ease;
}
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 61, 125, 0.1);
}
&-active {
& > img {
transform: none;
}
& .hero__title {
// 透明度を解除
opacity: 1;
transform: translate(-50%, -50%);
}
}
}
.hero {
&__title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 20px));
color: $cWhite;
font-size: 25px;
// 文字が最前面にくるようにする
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease 1s, transform 0.3s ease 1s;
}
&__footer {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
z-index: 2;
height: 68px;
width: 32px;
// アニメーションで上下に動いているように見えなくする
overflow: hidden;
}
&__downarrow {
position: absolute;
left: 0;
bottom: 0;
width: 6px;
// アニメーションを付けるために必要
@include animation(
$name: kf-arrow-anime,
$iteration-count: infinite,
$duration: 2s,
$timing-function: linear
);
}
&__scrolltext {
position: absolute;
// 90度回転
transform: rotate(90deg);
color: rgba(255, 255, 255, 0.7);
left: -8px;
top: 15px;
font-size: 1.2em;
}
}
@keyframes kf-arrow-anime {
0%,
50%,
100% {
transform: translateY(-10%);
}
30% {
transform: none;
}
}
hero-slider.js
class HeroSlider {
constructor(el) {
this.el = el;
this.swiper = this._initSwiper();
}
_initSwiper() {
// returnでインスタンスに返す
return new Swiper(this.el, {
// オプション詳しくはSwiperで
// direction: 'vertical',
loop: true,
// effect: 'fade',
grabCursor: true,
effect: "coverflow",
// スライダーを中央揃えにする
centeredSlides: true,
// 1枚だけ表示する
slidesPerView: 1,
speed: 1000,
breakpoints: {
// 1024px以上は2枚表示する
1024: {
slidesPerView: 2,
},
},
});
}
// 空のオブジェクトを作る
start(options = {}) {
options = Object.assign(
{
delay: 4000,
// マウスで変更したあとでも4秒後、またオートでトランジション開始する
disableOnInteraction: false,
},
options
);
this.swiper.params.autoplay = options;
this.swiper.autoplay.start();
}
stop() {
this.swiper.autoplay.stop();
}
}