Staff Blog
スタッフブログ

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly

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

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> 

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

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

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

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

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

関連記事

jQueryプラグイン「fancyBox」で縦位置の中央表示されない場合の対処法... こんばんは。 正月太りが未だ戻らず焦っているk太郎でございます。 さて、本日はjQueryのお話です。 弊社ではモーダルウインドウを作成する場合fancyboxを使用させていただくことがあります。 主に使用しているのはバージョン1.34なのですが、動的なページなどで初期表示に使用した...
5月25日のGoogle大変動、いったい何が起こったのか?... 5月23日から25日にかけてGoogleの検索順位変動率を示すグラフが大幅に上がっていますね。 何やら大きなアルゴリズムの改定があったもよう。 多分、検索キーワードとの関連性に関するものだと思われる。 Google変動後、弊社のサイトの状況はというと その...
SEOの戦い方がガラリと変わりそうな気配。... 先日、お客様のWEBサイトにて書かせていただいた記事が検索順位で2位まで来ました。 月間検索ボリューム20,000件ほどのキーワードで2位。 結果として満足ゾーンです。     この記事の月間PV数は4000PV~5000PVなので、かなりPVを稼げていると思います。...
弊社で制作した「税理士法人CROSSROAD」様のコーポレートサイトが書籍に掲載されました。... 先日、参考資料として会社で購入した書籍に弊社で制作した「税理士法人CROSSROAD」様のコーポレートサイトが掲載されておりました。 掲載されているとは知らずに購入したので発見したときはびっくり! こうやって取り上げていただけることは大変ありがたく嬉しいことで、第一発見者の私は思わず「載って...
私がブログを書く理由。WEBマーケティングのプロとして研究をしているから... 私がブログを書く理由は多々ありますが、その一つがWEBマーケティングのプロとして生計をたてているというもの。 WEBマーケティングの研究として色々な実験を行う場と考えております。 そんな実験の場って読者の皆さまに失礼だろって? 誤解の無いよう、また早合点無きよう説明させていただきますと。 真...
ホームページのアクセス数を上げたいのならブログを書くべし!ただし書きゃ良いってもんじゃない。... ホームページへの集客アップの相談は今も昔も変わりなく、「検索エンジンで上位に表示されるには?」とか「もっとホームページで集客したいんです。」って相談は後を経ちません。 そのご要望は何年も前と変わりはありませんが。 ですがその方法は年々変わっています。 とにかく情報を積極的に更新して配信...
WEBデザイン制作の時に役立つWEBサイトをご紹介... 今回は、デザイン制作時にそういえば毎回このサイト見ているなと思うサイトがいくつかあったので、そのサイトのうちの一部をご紹介します。 デザインの参考を探す まずはどんなデザインにするか決めるために、いろいろなアーカイブサイトからイメージに合うデザインを探します。 正直ブックマークしているサイト...
ブレイクポイントについて改めて考えてみた... .blogliststyle{ margin-left: 1em; } .blogliststyle li{ font-size: 17px; margin-left: 1.3em; margin-bottom: 10px; text-indent: -1.3em; } ...

この記事を共有する

髭人
投稿者:髭人
2016年05月31日火曜日 | 23:59
WEB制作業界に新しい風に!台風になりたい!

この人が書いたその他のブログ記事

“jQuery無しで動く!「swiper」がとても便利” への2件のフィードバック

  1. […] jQuery無しで動く!「swiper」がとても便利 […]

  2. […] jQuery無しで動く!「swiper」がとても便利 […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • I.M.Dコーポレートサイト
お問い合わせ