【 WEBデザイン 】 コードハッピーセット 「スライダー」FIREへの旅路 ♯493
WEBサイトのデザイン、コーディングで頻出の機能のコードを、
HTML、CSS(SCSS) 、JavaScriptをセットでまとめていきます。
今回は、「スワイパー」です。
Swiper.jsを使います。
【 スワイパー 】
＜ファイル構成＞
画像はimgフォルダに格納しています。
スワイプさせたい画像を入れましょう。
＜HTML＞
<!DOCTYPE html>
<html lang="ja">
<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>スワイパー</title>
<!-- reset.css destyle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
<!-- css -->
<link rel="stylesheet" href="/css/style.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- swiper js -->
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<!-- JavaScript -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</head>
<body>
<!--メインヴィジュアル-->
<div class="mv">
<div class="mv-container">
<!-- スライダーのコンテナ -->
<div class="swiper">
<!-- スワイパースライド -->
<div class="swiper-wrapper">
<!-- スライド 1-->
<div class="swiper-slide">
<!-- スライド １ 画像をバックグラウンドで指定-->
<div class="swiper-slide-img1 slide-setting">
<!-- スライド内のテキスト-->
<div class="mv-text">
<h2>スライド１</h2>
<h3>テキストテキストテキスト</h3>
</div>
</div>
</div>
<!-- /スライド 1-->
<!-- スライド 2-->
<div class="swiper-slide">
<!-- スライド 2 画像をバックグラウンドで指定-->
<div class="swiper-slide-img2 slide-setting">
<!-- スライド内のテキスト-->
<div class="mv-text">
<h2>スライド2</h2>
<h3>テキストテキストテキスト</h3>
</div>
</div>
</div>
<!-- /スライド 2-->
<!-- スライド 3-->
<div class="swiper-slide">
<!-- スライド 3 画像をバックグラウンドで指定-->
<div class="swiper-slide-img3 slide-setting">
<!-- スライド内のテキスト-->
<div class="mv-text">
<h2>スライド3</h2>
<h3>テキストテキストテキスト</h3>
</div>
</div>
</div>
<!-- /スライド 3-->
</div>
<!-- /スワイパースライド -->
<div class="page-nation">
<!-- ページネーション -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
<!--/メインヴィジュアル-->
</body>
</html>swiper jsを使って、スライドを実装します。
メインヴィジュアルのコンテナの中に、スワイパーを設置して、3枚のスライドを設置しています。
実際の画像に指定は、CSSでbackgroundで指定しています。
これは、画像の上にテキストを配置するためです。
テキストは左上にありますが、カスタマイズして、中央に表示するなどしましょう。
＜SCSS＞
/*=========================================
スワイパー
===================================*/
.mv {
width: 100%;
&-container {
width: 100%;
.swiper-wrapper {
width: 100%;
.swiper-slide {
width: 100%;
.slide-setting {
width: 100%;
height: 500px;
background-size: cover;
background-position: 0% 50%;
.mv-text {
color: white;
}
}
&-img1 {
background-image: url(/img/img1.jpg);
}
&-img2 {
background-image: url(/img/img2.jpg);
}
&-img3 {
background-image: url(/img/img3.jpg);
}
}
}
}
}
各画像パスはそれぞれのフォルダ構成に応じて書き換えてください。
＜コンパイル後CSS＞
/*==================================================
スワイパー
===================================*/
.mv {
width: 100%;
}
.mv-container {
width: 100%;
}
.mv-container .swiper-wrapper {
width: 100%;
}
.mv-container .swiper-wrapper .swiper-slide {
width: 100%;
}
.mv-container .swiper-wrapper .swiper-slide .slide-setting {
width: 100%;
height: 500px;
background-size: cover;
background-position: 0% 50%;
}
.mv-container .swiper-wrapper .swiper-slide .slide-setting .mv-text {
color: white;
}
.mv-container .swiper-wrapper .swiper-slide-img1 {
background-image: url(/img/img1.jpg);
}
.mv-container .swiper-wrapper .swiper-slide-img2 {
background-image: url(/img/img2.jpg);
}
.mv-container .swiper-wrapper .swiper-slide-img3 {
background-image: url(/img/img3.jpg);
}/*# sourceMappingURL=style.css.map */SCSSを使わない場合はこちらです。
＜JavaScript＞
<script>
let mySwiper = new Swiper('.swiper', {
autoplay: {
delay: 3000,
},
loop: true, //ループ有効に
slidesPerView: 1, //スライドを1つずつ表示
spaceBetween: 35,
centeredSlides: true, //アクティブなスライドを中央に表示
pagination: { //ページネーションを表示
el: '.swiper-pagination',
type: 'bullets',
clickable: true, //アイコンをクリックすると対応するスライドに移動
},
navigation: { //ナビゲーションボタンを表示
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>Swiper.jsを使っています。
動きの指定は、コメントの通りです。
Swiper.jsは追加機能や、カスタマイズが簡単にできます。
こちらをご参考に！！
【 まとめ 】
Swiper.jsで、スライダーを実装しました。
簡単なコードでいい感じのスライダーが実装できます！！
この記事が気に入ったらサポートをしてみませんか？