モダンなレスポンシブ, Mobile 対応 JavaScript スライダーライブラリ Swiper のサンプルコードを単体で動くように修正した内容をご紹介します。

nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions

動作環境

• swiper v4.5.0

Swiper サンプルコード

git clone swiper

git clone https://github.com/nolimits4web/swiper.git
cd swiper
git checkout refs/tags/v4.5.0

CDN を利用する

swiper の demos ディレクトリ以下のファイルを単体で動くように .css .js ファイルを CDN から読み込むように修正します。

Use Swiper from CDN を参考に

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

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

以下は demos/010-default.html を CDN 利用するコードに修正した diff です。

diff --git a/demos/010-default.html b/demos/010-default.html
index be28c6a..e023d9a 100644
--- a/demos/010-default.html
+++ b/demos/010-default.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Swiper demo</title>
   <!-- Link Swiper's CSS -->
-  <link rel="stylesheet" href="../dist/css/swiper.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
 
   <!-- Demo styles -->
   <style>
@@ -63,7 +63,7 @@
   </div>
 
   <!-- Swiper JS -->
-  <script src="../dist/js/swiper.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
 
   <!-- Initialize Swiper -->
   <script>

Swiper サンプルコードをカスタマイズ

最後に demos/010-default.html などのサンプルコードをカスタマイズして、依頼主に「こんなイメージですか？」と 010-default.html の１ファイルだけ共有して、ソースコードを含めてまるっと確認してもらいましょう。

以上、JavaScript スライダーライブラリ Swiper のサンプルコードを触ってみた、現場からお送りしました。