この記事を書いてる人: 
tea

写真アカウント用のポートフォリオwebサイトで、巷によく見られるような写真スライドショーを追加したいなと思いました。短い時間でサクッと作業を終わらせたかったので、使い慣れているjQueryのプラグインを探してみました。ですが、これといった良い物が見つからずに苦労しました(^ ^;)

結論から先に書くと、一番おすすめだと思うjQueryのプラグインはslippryでした。またTouchSwipe-Jquery-Pluginプラグインを活用するとスワイプに対応させる事ができるようです。詳しくは後半で解説していきます。

今回は、写真スライドショー(カルーセル)プラグインを追加した時にハマった話を備忘録として残したいと思います。今どきjQuery使うなと怒られそうですが、優しい目でご覧頂ければ幸いです。

Golden apple | Sony α7 + Sonnar T* FE 55mm F1.8 ZA
 Golden apple | Sony α7 + Sonnar T* FE 55mm F1.8 ZA  photo by tea ©
Ads

目次

一番良さげなプラグインはslippry

写真スライドショーが実装できるjQueryプラグインは、ネットで無数に存在しています。ただし、

  • レスポンシブに対応している
  • スマートフォンのスワイプ操作に対応している

といった最近では必須となっている機能をサポートしているプラグインは数が少ないようです。…というか、私はこの条件を満たしているjQueryプラグインを見つけることができませんでした。(良いものがあったら教えて下さい!)

まあ、jQueryの全盛期にはスマホサポートという概念は無かったですからね…。

ということで、プラグインの一部改造も含めてプラグインを探してみる事にしました。すると、slippryというスライドショープラグインがなかなか良さそうでした。

GitHub
booncon/slippry
プラグインのデモ

レスポンシブデザインに対応しており、ペイジャーやコントローラーなどのUIも一通り揃っています。

スワイプ操作が可能になるTouchSwipe-Jquery-Plugin

さらに、jQueryでスマホ等のタッチデバイスのスワイプ操作を検出できるプラグインを使います。

GitHub
mattbryson/TouchSwipe-Jquery-Plugin
A jQuery plugin for touch devices

Ads

bowerでプラグインをインストール

ということで、先ほどご紹介したプラグインをbowerでインストールします。

bash
1
$ bower install jquery-touchswipe slippry --save

それぞれのプラグインで使用するjsファイルやcssファイルを、サイトのアセットファイルにインポートしておきます。

slippryでスワイプ操作可能にする

それでは早速スライドショーを実装していきます。

portfolio.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="content-slider">
<ul>
<li>
<a href="#side1">
<img src="image1.jpg" />
</a>
</li>
<li>
<a href="#side2">
<img src="image2.jpg" />
</a>
</li>
<li>
<a href="#side3">
<img src="image3.jpg" />
</a>
</li>
</ul>
</div>

続いて、jsファイルにslippryの呼び出しと、スワイプ操作を実装していきます。jQueryの即時関数の中に、プラグインの命令を書きます。

script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function($){
$(".slider-content").each(function() {
$(this).data('slippry',$(this).slippry({
captions: false,
speed: 3000,
pause: 6000,
controls: false,
start: "random",
}));
});

$('.slider-content').swipe({
swipeLeft : function(event, distance, duration, fingerCount, fingerData, currentDirection) {
var lSlippry = $(this).data('slippry');
lSlippry.goToNextSlide();
},
swipeRight : function(event, distance, duration, fingerCount, fingerData, currentDirection) {
var lSlippry = $(this).data('slippry');
lSlippry.goToPrevSlide();
},
}
);
})(jQuery);

.slippry()がslippryプラグインのメソッドとなっており、.swipe()メソッドがTouchSwipe-Jquery-Pluginプラグインのメソッドです。

見た目を調整する

最後にUIやスライドの見た目を調整します。slippryプラグインをポートフォリオサイトに組み込んだら、何故か点線が表示されるようになりましたので、それらを非表示にしておきます。

style.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.sy-caption-wrap .sy-caption a:link,
.sy-caption-wrap .sy-caption a:visited ,
.sy-pager li.sy-active a,
.sy-pager li a{
outline: none !important;
text-decoration: none !important;
border: none;
}

#slider-content{
*{
outline: none !important;
text-decoration: none !important;
border: none;
&:hover , &:visited , &:focus , &:active , &:link{
outline: none !important;
text-decoration: none !important;
border: none;
}
}
li{
display: block;
padding: 0;
margin: 0;
}
}

これでスワイプ操作が可能なスライドショーが追加できました!

参考になった記事

GitHub
Touch Swipe Support Needed #42

slippryにスワイプ操作を対応させて欲しいというissueが挙がっています。ここで対応方法が書かれています。

GitHub
Control button’s visual conflict using Twitter Bootstrap #50

見た目が崩れる問題についての対処方法が書かれています。

Ads
 記事を書いてる人
gravatar
tea (てぃー)

自然風景や人物の写真撮影を行っています。その他は音楽や映像・メダカの鑑賞も好きです。ブログでは気になったことをメモ代わりにまとめていますので気軽にご覧ください(^^)

 お問い合わせ

 ポートフォリオ

 各作例のご紹介

 シェアする
 記事名とURLをコピーする

jQueryの写真スライドショープラグインはslippryがおすすめかも。時代遅れだけど追加してみた話 https://photo-tea.com/p/1801/portfolio-slideshow-jquery/

Ads
 おすすめ記事
 作例掲載