デイトラweb制作中級編 DAY23
nakano
スライダー（カルーセル）を作る
①JavaScript
JavaScriptのライブラリの「Swiper」を使ってスライダーを作成
const swiper = new Swiper('.swiper', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});元のコードからの変更点
「direction: 'vertical'」を削除
→ 横方向にスライドさせるため
「clickable: true」を追加
→ ページネーションが反応するようになる
②HTML
<div class="swiper">
<div class="swiper-wrapper">
<!-- ここから -->
<div class="swiper-slide">
<div class="main-visual">
<div class="main-visual__content">
<div class="main-visual__title">一番伝えたいことを書く</div>
<div class="main-visual__lead">リードリードリード</div>
<div class="main-visual__button"><a href="">お問い合わせ</a></div>
</div>
</div>
</div>
<!-- ここまで5セット -->
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>③SCSS（元のCSSを上書き）
デザインカンプのアローアイコンやページネーションは、Swiper標準のデザインとは異なる
→ デベロッパーツールで該当のCSSの値を確認して上書きしていく
アローアイコン
.swiper-button-next {
width: 40px;
height: 40px;
margin-top: -20px;
background: transparent url(../img/arrow-next.png) no-repeat center center / contain;
right: calc(50% - #{$layout-width-inner / 2});
&::after {
display: none;
}
@include mq('tab') {
right: 10px;
}
@include mq('sp') {
width: 30px;
height: 30px;
right: 10px;
}
}
.swiper-button-prev {
width: 40px;
height: 40px;
margin-top: -20px;
// 「transparent」は透明
background: transparent url(../img/arrow-prev.png) no-repeat center center / contain;
left: calc(50% - #{$layout-width-inner / 2});
&::after {
display: none;
}
@include mq('tab') {
left: 10px;
}
@include mq('sp') {
width: 30px;
height: 30px;
left: 10px;
}
}ヘッダーのインナー幅に揃えたいため、中央基準で配置（PC時）
left: calc(50% - #{$layout-width-inner / 2});
→ 「中央から左に600px」
※「$layout-width-inner」は1200px、変数前の「#」を忘れない！
ページネーション
.swiper-pagination-bullet {
width: 16px;
height: 16px;
background: #FFFFFF9E;
opacity: 1;
@include mq('sp') {
width: 11px;
height: 11px;
}
}
.swiper-horizontal>.swiper-pagination-bullets
.swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
.swiper-pagination-bullet {
// ドット間の距離
margin-right: 8px;
}
.swiper-pagination-bullet-active {
background: #2F7DC8;
}opacityの設定
元のコードが透明にしているため、「opacity: 1;」で上書き
「opacity: 1;」を書かない場合（見えない） ↓
「main-visual__content」
.main-visual__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
@include mq('sp') {
padding: 0 46px;
}
}
.main-visual__title {
font-size: 64px;
font-weight: 700;
white-space: nowrap;
line-height: 1.3;
@include mq('sp') {
font-size: 32px;
white-space: normal;
}
}スマホ時のpadding
.main-visual__content {
@include mq('sp') {
padding: 0 46px;
}
}
→ タイトルがアローアイコンに被らないようにする
「padding」を入れない場合 ↓
「padding」を入れた場合 ↓
スマホ時は「white-space: normal;」を適用
white-space: nowrap;
→ 自動的な折り返しはしない
white-space: normal;
→ 初期値（折り返しする）
※white-spaceについては 中級編 DAY12
まとめ
今回はメインヴィジュアルにスライダーの機能を付けました。
始める前は自分で作るのかなぁと少し不安でしたが、先人の凄い人が作ってくれたJavaScriptのライブラリがあったので、ものすごく楽できました！
