年内最後の更新は、今年よく利用させてもらった「swiper」の使い方を解説します。
サイトのメインビジュアルでよく目にするスライダーですが、導入するなら「swiper」がお勧めです。
有名な大手サイトも利用していて、「jQuery」を必要とせず、オプション機能も豊富です。
メインビジュアル以外にも、サムネイル形式のスライダーなど、色々と応用する事も出来ます。
今回は、画像を背景にして、テキストを乗せるスライダーにしてみます。
まずはデモページをご覧ください。
デモページを見る
ファイルのダウンロード
https://swiperjs.com/get-started
ファイルのダウンロードは下記からとなります。
https://www.jsdelivr.com/package/npm/swiper?tab=files
必要なファイルは下記の2つになりますので、ダウンロードしてください。
swiper-bundle.min.css
swiper-bundle.min.js
◆HTMLです。
ダウンロードしたファイルを読み込みます。パスは任意に変更してください。
HTML
<script src="swiper/swiper-bundle.min.js"></script>
次に、スライダー部分は「swiper-container」と「swiper-wrapper」で囲んで、それぞれの画像とテキストを「swiper-slide」で囲みます。
「swiper-slide」には、背景画像を指定するために「slide01、slide02、slide03」を追加しています。
HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 1つ目のスライド -->
<div class="swiper-slide slide01">
<div class="swiper_txt">
<h2>タイトル1</h2>
<p>サブタイトル1</p>
</div>
</div>
<!-- 2つ目のスライド -->
<div class="swiper-slide slide02">
<div class="swiper_txt">
<h2>タイトル2</h2>
<p>サブタイトル2</p>
</div>
</div>
<!-- 3つ目のスライド -->
<div class="swiper-slide slide03">
<div class="swiper_txt">
<h2>タイトル3</h2>
<p>サブタイトル3</p>
</div>
</div>
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
<!-- 矢印 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
◆CSSです。
数値やパスなどは任意で変更してください。
矢印は「Fontawesome」のアイコンを使用していますので、別途読み込みしてください。
CSS
.main_visual {
position: relative;
margin: 100px 0;
}
.swiper-slide {
width: 100%;
min-height: 700px;
overflow: hidden;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slide01 {
background-image: url("../img/slide01.jpg");
}
.slide02 {
background-image: url("../img/slide02.jpg");
}
.slide03 {
background-image: url("../img/slide03.jpg");
}
.swiper_txt{
position: absolute;
color: #fff;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
.swiper_txt h2{
font-size: 4rem;
margin-bottom: 20px;
}
.swiper_txt p {
font-size: 2rem;
}
.swiper-pagination-bullet {
width: 20px!important;
height: 20px!important;
background: #fff!important;
opacity: 0.5!important;
}
.swiper-pagination-bullet-active {
width: 20px!important;
height: 20px!important;
background: #fff!important;
opacity: 1!important;
}
.swiper-button-prev:before {
font-family: "Font Awesome 5 Free";
content: "\f104";
color: #fff;
font-size: 60px;
font-weight: 900;
}
.swiper-button-next:before {
font-family: "Font Awesome 5 Free";
content: "\f105";
color: #fff;
font-size: 60px;
font-weight: 900;
}
.swiper-button-prev, .swiper-button-next {
color: #fff!important;
}
@media screen and (max-width:767px){
.swiper-wrapper .swiper-slide {
min-height: 400px;
}
.swiper_txt h2 {
font-size: 2rem;
}
.swiper_txt p {
font-size: 1rem;
}
}
◆オプションです。
「/body」の前に記述します。
各オプションはコメントで説明しているので確認してください。
数値は任意で変更してください。
オプション
var swiper = new Swiper('.swiper-container', {
loop: true, //ループさせる。ループ無しは「false」
speed: 2000, //2秒かけながら次の画像へ移動
effect: "fade", //スライドのエフェクト「slide・fade・cube・coverflow・flipの4種類」
slidesPerView: 3, //表示させるスライド数（スライドのエフェクトが「fadeやcube」だと複数にならない）
autoplay: {
delay: 3000, //3秒後に次の画像へ
disableOnInteraction: true, //ユーザーがスライダーを操作したら自動再生を停止し、操作後に自動再生を再開する
},
navigation: { //次と前の矢印を有効にする
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: ".swiper-pagination", //円形のページネーションを有効にする
clickable: true, //ページネーションのクリックでスライドが切り替わる
}
});
</script>
「swiper」は色々なシーンで使えるので、より詳しく知りたかったり、数多くあるオプションも把握したいという方は調べてみてください。