Web上で自由自在の万能スライダー「Swiper」
概要
「Swiper」はWebアプリケーション上で動作するレスポンシブ対応可能なjQuery不要高機能スライダー。
WEBページにプラグインを適用するだけでリッチなUIが可能になります。
どんなとき使う？
Swiperは例えば下記に挙げたような用途に利用できる。しかし、ユーザ次第でこれ以外にも様々な用途に応用可能です。
- Flexboxのレイアウト
- 複数行スライドレイアウト
- 双方向制御
- バーチャルスライド
- 3Dエフェクト
(引用元: http://idangero.us/swiper/)
こんなの
導入まで
Swiperの導入には
１．公式サイトよりライブラリをダウンロード
２．ダウンロードの/dist/js/swiper.jsを取り出す
３．HTMLにswiper.jsを実装
４．ブラウザで表示
準備するもの
入手方法
公式サイト（http://idangero.us/swiper/) のDownloadより
マニュアル
導入手順(http://idangero.us/swiper/get-started/)
APIレファレンス(http://idangero.us/swiper/api/)
導入事例
セントラルソフト株式会社様（http://www.central-soft.co.jp/)
実装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-container_2 {
padding-top: 0px;
padding-bottom: 0px;
height: 100%
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<!-- Swiper -->
<!-- コンテナ(swiper-containerで定義) swiper-container_1は区別用 -->
<div class="swiper-container swiper-container_1">
<!-- ラッパー(対象領域。swiper-wrapperで定義) -->
<div class="swiper-wrapper">
<!-- スライド(ページ単位。swiper-slideで定義) -->
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
<div class="swiper-slide">
<!-- 入れ子構造 -->
<div class="swiper-container swiper-container_2">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
</div>
<div class="swiper-pagination swiper-pagination_2"></div>
</div>
</div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/10)"></div>
</div>
<!-- Add Pagination -->
<!-- ページネーション -->
<div class="swiper-pagination swiper-pagination_1"></div>
</div>
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container_1', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination_1',
clickable: true,
},
});
var swiper2 = new Swiper('.swiper-container_2', {
direction: 'vertical',
effect: 'cube',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination_2',
clickable: true,
},
});
</script>
</body>
</html>