・オシャレなスライドショーを作りたい
・かっこいい画像スライダーが欲しい
webサイトやHPの案件だとよく出てくる話ですね。
スライドショーがかっこいいだけで、そのサイトの雰囲気もぐっとあがります。
見せ方というのは重要ですが、それをイチから実装するとなるとだいぶ難易度があがります。そんなときに「Swiper」というライブラリがおすすめです！
スライドショーについては以前の記事で「Slider Pro」というライブラリも紹介していますが、どちらも優秀なライブラリなので、好みが分かれるところかと思います。
便利でオシャレなjQueryスライドショー「Slider Pro」の紹介！スマホにも対応！
空のhtmlファイル（demo.html等）を作成し、当ページのサンプルソースを貼り付けて、ブラウザで実行すると、すぐに動作確認できます！
CDNを使うとライブラリのダウンロードも不要で以下のコピペだけで実装終了です！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>
<!-- jQuery・bootstrapライブラリ読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- /jQuery・bootstrapライブラリ読み込み -->
<!-- 独自ライブラリ読み込み -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- /独自ライブラリ読み込み -->
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- スライド -->
<div class="swiper-slide" style="background-image:url(https://appsol-one.com/custom/00-img/y1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://appsol-one.com/custom/00-img/y2.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://appsol-one.com/custom/00-img/y3.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://appsol-one.com/custom/00-img/y4.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://appsol-one.com/custom/00-img/y5.jpg)"></div>
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
<!-- ナビゲーションボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- ############ javascript ############ -->
<script type="text/javascript">
$(function(){
var swiper = new Swiper('.swiper-container', {
loop: true,
effect: 'coverflow',
slidesPerView: 2, // or 'auto'
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
</script>
<!-- ############ /javascript ############ -->
<!-- ############ style ############ -->
<style>
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 50%;
height: 300px;
}
</style>
<!-- ############ /style ############ -->
</body>
</html>公式サイトはこちらです。
https://swiperjs.com/
CDNを使う方法であれば、当ページのサンプルソースを使えば、完成です！
ダウンロードして使う場合は、以下の2つのライブラリを取得し、ソースに読み込ませてください
https://unpkg.com/swiper/swiper-bundle.min.css
https://unpkg.com/swiper/swiper-bundle.min.js
また、jQueryのライブラリも必要なので取得・読込をしてください！
https://code.jquery.com/jquery-3.4.1.min.js
１、まずはHTMLを用意
<div class="swiper-container">
<!-- スライド -->
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(https://appsol-one.com/custom/00-img/y1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://appsol-one.com/custom/00-img/y2.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://appsol-one.com/custom/00-img/y3.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://appsol-one.com/custom/00-img/y4.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://appsol-one.com/custom/00-img/y5.jpg)"></div>
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
<!-- ナビゲーションボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>大きく分けると以下の3つを用意します
１、スライド部分
２、ページネーション部分
３、ナビゲーション部分
スライド部分には、表示したい画像を用意しましょう！imgタグではなく、styleで「background-image:url」として指定するので注意してください。
２、JavaScriptでSwiperを生成
var swiper = new Swiper('.swiper-container', {
loop: true,
effect: 'coverflow',
slidesPerView: 2, // or 'auto'
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});JavaScriptで上記のようにSwiperを生成します。
「new Swiper」の引数として、「セレクタ」と「オプション」を指定します。
「セレクタ」はHTMLで全体をくくってあるタグのclass名を指定します。セレクタはcssのセレクタと考え方は同じです。
３、cssで表示を調整
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 50%;
height: 300px;
}上記のうち、特にポイントとなるところは「.swiper-slide」の「width: 50%;」です。ここを変更すると、真ん中の画像が画面全体になったり、左右にスライドが角度がついた状態で表示されたりもします。
３、他のサンプルについて
このライブラリは本当にたくさんのオプション・表示方法があります。
スクロールを縦方向にできたり、画面幅に応じて、表示方法を変えるということもオプションで指定することも可能です。
公式のデモサイトで各サンプルを見たり、各サンプルのソースもダウンロード可能なので、是非確認みてください。
公式のデモサイト
https://swiperjs.com/demos/#default
よかったら、ＳＮＳでシェアして頂けると嬉しいです！
今後の励みにもなりますので、よろしくお願いします！
