jQuery無しで動く！「swiper」がとても便利

髭人

2016.05.31

WEB制作

swiper

最近サイトをコーディングしていて必ず使うといっても過言ではない「スライダー」！
その中でも、最近のお気に入りである「swiper」をご紹介します。

なぜお気に入りかというと、

– 動作が軽い！
– jQueryに依存しない
– レスポンシブに対応
– オプションがとにかく豊富

ッて感じですかね。

この中でもjQueryを使わなくてもいいというところと動作が軽い、反応速度が良いというところが一番好きなです。
インストールもできるしCDNも使える。
ダウンロードしなくても、さくっと使えちゃうことが、更に便利さを加速しています。

では、実際に使ってみましょう。

まずは、cssとjsを読み込む。
CDNで用意されているので、こちらを読み込むのが簡単です。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>

“`
Don’t forget to change 3.x.x with actual Swiper version
“`
とあるので、3.x.xの部分を適したバージョンと置き換えて記述すればいいようです。

<!DOCTYPE html>
<html lang="ja">
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script>
</body>
</html>

基本的にはこんな感じで読み込んでいれば問題ないと思います。
cssはhead内にjsはbodyのとじタグの前に。
上記のJSだと、jQueryがなくても動きます。
jQueryのほうだと「swiper.jquery.js」こっち側を使えばいいと思います。

<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>

<!-- ナビゲーションボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- スクロールバー -->
<div class="swiper-scrollbar"></div>
</div>

htmlの部分は上記のようになりま。


<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
</div>

スライドさせたい枠に「swiper-wrapper」というクラスをつけます。
その中の各スライドさせる中身は「swiper-slide」というクラス。
これに関しては、固定のようです。

大枠についているクラス「swiper-container」は任意のようです。

ページネーション(pagination)をつける

<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>

<!-- ページネーション -->
<div class="swiper-pagination"></div>
</div>

paginationを付けたいときは大枠内に表示させるためのdivを追加する

ナビゲーション(next back)ボタンをつける

<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>

<!-- ナビゲーションボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

ページネーションと同じく表示用のdivを追加する。

jsの設定

 <script>
var mySwiper = new Swiper ('.swiper-container', {
loop: true,

// ページネーション
pagination: '.swiper-pagination',

// ナビゲーションボタン
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

});
</script>

大枠の指定、ページネーション、ナビゲーションボタンの指定をする。
これだけで動作します。

特に何かをダウンロードすることもなく実装できます。

上記以外でのオプションやデモは公式サイトよりご確認ください。

[公式サイト]
[デモページ]
[オプションページ]

実装していただければ、わかると思いますが、簡単に実装できる上に、動作が軽快であること、たくさんのオプションによりカスタマイズが可能なことと、すごく便利です。
一度、みなさんも試してみてはいかがでしょうか。