Blog

フクロウメンバーによる日常をご紹介いたします。

2016-10-11  カテゴリ:HTML5・CSS3, JavaScript・jQuery

Posted by kurihara

超便利な画像スライダー「Swiper」

どうもみなさまこんばんは。

今回は「Swiper」という画像スライダーを紹介しようかと思います。

Java Scriptで作られている画像スライダーです!

カスタマイズ性もかなり高いです。

両サイドについているボタンを押してもスライドするし

マウスでドラッグしても次の画像に移動することができます。

スマホにそのまま持っていっても、確実に動作するのでかなり多用しています。

 

ではまずダウンロードから!!

Swiper - Most Modern Mobile Touch Slider

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-18-45-20

 

Downloadボタンからファイル一式をダウンロード。

中身はこんな感じです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-18-54-58

 

「dist」の中の、

  • swiper.js
  • swiper.css

を使用します。

 

本当に基本的な使用方法としましては、下のコードを参考にしてください!!

 

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>Swiper demo</title>
 <!-- Link Swiper's CSS -->
 <link rel="stylesheet" href="../dist/css/swiper.min.css">

</head>
<body>
 <!-- Swiper -->
 <div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide">Slide 1</div>
 <div class="swiper-slide">Slide 2</div>
 <div class="swiper-slide">Slide 3</div>
 <div class="swiper-slide">Slide 4</div>
 <div class="swiper-slide">Slide 5</div>
 <div class="swiper-slide">Slide 6</div>
 <div class="swiper-slide">Slide 7</div>
 <div class="swiper-slide">Slide 8</div>
 <div class="swiper-slide">Slide 9</div>
 <div class="swiper-slide">Slide 10</div>
 </div>
 </div>

 <!-- Swiper JS -->
 <script src="../dist/js/swiper.min.js"></script>

 <!-- Initialize Swiper -->
 <script>
 var swiper = new Swiper('.swiper-container');
 </script>
</body>
</html>

 

という感じで、いたって普通の書き方ですね笑

特別難しいことはありません!!

 

ちなみにこのソースコードは

「demos」というフォルダに入っている「01-default.html」

というやつです。

 

ちなみに私が最近使用したコードはこちらです。

<div class="swiper-container">
<div class="swiper-wrapper">

	<div class="swiper-slide"> 
		<!-- Slide-01 コンテンツを挿入する -->
	</div>

	<div class="swiper-slide">
		<!-- Slide-02 コンテンツを挿入する -->
	</div>

	<div class="swiper-slide"> 
		<!-- Slide-03 コンテンツを挿入する -->
	</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>

 

 

実装するにあたってはこちらを参考にさせていただきました。

<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>

この4つのコードは

・ページネーション

・左右のボタン

・スクロールバー

を追加しています!

 

一つ問題点としては、ページを再読み込みした時に動かなかくなる場合があるそうなのですが

その時の解決策も参考にしたブログにかいてるかと思いますのでご覧になってください。

っていうか、もう、そちらのブログを見てもらえればと思います。笑

では!!

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

ページトップに戻る