この記事では、Swiperで作ったスライド（カルーセル）の一つ上のレイヤーに、ボタンを設置する方法を紹介します。なお、ボタンは画面上の一定の位置に表示され、スライド切り替えの影響を受けないものとします。
言葉で説明しても分かりにくいため、下記に見本のCODE-PENを載せておきます。どのように表示されるのかご確認下さい。
See the Pen Swiperにボタンをオーバレイ by s sim (@s-sim) on CodePen.
目次
HTML・CSSのポイント
最初にコードのポイントをザックリとまとめておきます。
- HTML：ボタンタグとスライドタグは兄弟関係になるようにする。
- CSS：スライドとボタンの親タグにposition:relative;、ボタンタグにposition: absolute;とz-index: 2;としてボタンをスライド上に浮かせて、オーバーレイ表示させる。
以下、詳しくコードを紹介していきます。
HTMLの構造
スライド上にボタンをオーバーレイ表示させるための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">
<!-- 電話番号リンクを無効化 -->
<meta name="format-detection" content="telephone=no">
<title>CodePen用</title>
<!-- reset.css destyle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
<!-- swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
<!-- google fonts CSS Noto sans-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet">
<!-- このサイトのCSS -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- FV -->
<section class="home-fv">
<div class="home-fv_wrapper">
<!-- スライド -->
<div class="home-fv-slide_wrapper">
<!-- 以下Siwper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- スライド１の画像 -->
<div class="slide-img_wrapper">
<img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic3.jpg" alt="波紋グレー"
class="home-fv-pc_img">
</div>
</div>
<div class="swiper-slide">
<!-- スライド２の画像 -->
<div class="slide-img_wrapper">
<img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic2.jpg" alt="水面ブルー"
class="home-fv-pc_img">
</div>
</div>
<div class="swiper-slide">
<!-- スライド３の画像 -->
<div class="slide-img_wrapper">
<img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic1.jpg" alt="波紋グリーン"
class="home-fv-pc_img">
</div>
</div>
</div>
<!-- swiperの左右のボタン -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- swiperの画面下部のページネーションのポチポチ -->
<div class="swiper-pagination"></div>
</div>
</div>
<!-- ボタン-->
<a href="#" class="home-fv-button-wrapper">
ボタン
</a>
</div>
</section>
</body>
<!-- swiperのscript -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- このサイトのスクリプト -->
<script src="./script.js"></script>
</body>スライド上にボタンを表示させるために必須のHTML構造
上のHTMLにはheadタグや諸々の要素が書かれて見づらいですが、スライド上にボタンをオーバーレイ表示させるために必要なHTMLの構造はとても単純です。
要点をまとめると、次の２点のみです。
- 「ボタン」タグと「スライド（swiper）」タグを兄弟関係にする
- 「ボタン」タグと「スライド（swiper）」タグの親となるタグが必要
実際にHTMLを余計な要素を除いて、構造を分かりやすくすると下記のようになります。
<body>
<!-- FV -->
<section class="home-fv">
<!-- スライドとボタンの親タグ -->
<div class="home-fv_wrapper">
<!-- スライド -->
<div class="home-fv-slide_wrapper">
<!-- 以下Siwper（コードは省略） -->
</div>
<!-- ボタン-->
<a href="#" class="home-fv-button-wrapper">
ボタン
</a>
</div>
</section>
</body>
CSSの書き方
スライド上にボタンをオーバーレイ表示させるためのCSSの見本を下に載せておきます。
@charset "UTF-8";
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
line-height: 1.8;
font-size: 16px;
background-color: rgb(57, 57, 57);
}
/* スライドとボタンの親タグ */
.home-fv_wrapper {
position: relative; /* ボタンをオーバーレイ表示させるために必要 */
width: 100%;
height: 100%;
}
/* スライド */
.home-fv-pc_img {
object-fit: cover;
width: 100%;
aspect-ratio: 16 / 9;
}
/* ボタン */
.home-fv-button-wrapper {
/* ボタン内要素中央寄せ */
display: flex;
justify-content: center;
align-items: center;
/* ボタンをオーバーレイ表示させるために必要 */
position: absolute;
z-index: 2;
/* ボタン背景テクスチャ */
background-image: url(https://shimizu-create.com/wp-content/uploads/2024/09/wood.jpg);
background-size: cover;
border-radius: 10px;
top: 10%;
left: 50%;
transform: translateX(-50%);
/* ボタン内テキスト */
font-size: 18px;
color: #fff;
font-weight: 600;
line-height: 1.4;
text-align: center;
padding: 40px 60px;
}
スライド上にボタンを表示させるために必須のCSS
諸々の装飾が書かれていますが、スライド上にボタンを表示させるために必要なコードを抜粋すると下記のようになります。
/* スライドとボタンの親タグ */
.home-fv_wrapper {
position: relative; /* ボタンをオーバーレイ表示させるために必要 */
}
/* ボタン */
.home-fv-button-wrapper {
/* ボタンをオーバーレイ表示させるために必要 */
position: absolute;
z-index: 2;
}
ポイントは最初に紹介したとおり、
- スライドとボタンの「親」タグにposition: relative;
- 「ボタン」タグに、position: absolute;とz-index: 2;でスライド上にボタンを浮かせてオーバーレイ表示させます。
なお、z-indexの数値は、他の要素との関係などにより適宜変更して下さい。
JavaScriptの書き方
SwiperのJavaScriptは公式サイトの見本コードのコピペで問題なく表示されます。特に工夫は必要ありません。
下に一応、この記事の最初に紹介したCODE-PENで使ったコードを載せておきます。
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
speed: 1000,
autoplay: {
delay: 4000,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});まとめ
最後に、Swiperで作ったスライド（カルーセル）の一つ上のレイヤーに、ボタンをオーバーレイさせた見本のCODE−PENを載せておきますので、表示やコードをご確認下さい。
See the Pen Swiperにボタンをオーバレイ by s sim (@s-sim) on CodePen.
関連記事
以下、swiperの関連記事になりますので、参考にしてみて下さい。
SIMS-CODE
【Swiper】設定・使い方とオプション・カスタマイズの方法【JavaScript】 | SIMS-CODE
Swiperの実案件で頻出パターンを紹介します。基本設定・使い方とオプション・カスタマイズの方法についてCodePenを使いながら、html, CSS, JavaScriptの書き方を解説。fade…
SIMS-CODE
【Swiper】スライドが拡大するアニメーション【CSS追加のみで実装】 | SIMS-CODE
既存のSwiperスライドにCSSを追加するだけで拡大アニメーションを実装する方法を紹介します。なお、追加するCSSは完全にコピペのみでアニメーションが実装できます。 見本…
SIMS-CODE
【Swiper】スライド画像の拡大アニメーションの作り方【CSS追記のみで実装】 | SIMS-CODE
Swiperでスライド画像が拡大するアニメーションの作り方を紹介します。CSS追記のみで簡単で実装できます。
SIMS-CODE
【Swiper】画像に文字アニメーションを入れる方法【CSSのみ】 | SIMS-CODE
この記事ではSwiperのスライド画像への文字入れと文字アニメーション（フェードインとスライドイン）の作り方を紹介します。CSSのみで実装できます。
