5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Bootstrapのcarouselをスワイプできるようにする

Last updated at Posted at 2016-07-06

ARマガジンのモバイルサイトをBootstrapでリニューアルして2週間。

carouselをスワイプ出来たら良いなぁと思い、ToucheSwipte.jsで実現する方法を見つめました。

紹介されているサイト(本家かなぁ?)が
http://labs.rampinteractive.co.uk/touchSwipe/demos/
です。

お目当てのToucheSwipte.jsのダウンロードは
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
から行いました。

ToucheSwipte.js をインクルードして

$(document).ready(function(){
});

の中に書くのは

$(".carousel-inner").swipe( {
	swipeLeft:function(event, direction, distance, duration, fingerCount) {
		$(this).parent().carousel('next'); 
	},
	swipeRight:function(event, direction, distance, duration, fingerCount) {
		$(this).parent().carousel('prev'); 
	}
});

だけ、英語のサンプルではswipeLeftのアクションがcarousel('prev');になっていたけど、めくる感じより、引っ張る感じの方が良いと多数決でcarousel('next'); にしました。

実際の実装結果文壇ビストロ ELSKA(エルスカ)で確認できます。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?