サイト制作に関するメモ書き

HOME > JavaScript > Angular > Onsen UIのカルーセルを使ってみる

Onsen UIのカルーセルを使ってみる

Onsen UIのカルーセルを使ってみます。

ons-carouselの属性

ons-carouselの属性をいくつか試してみます。

HTML

<ons-navigator var="myNavigator">
	<ons-page>
		<div class="contents">
			<ons-carousel swipeable class="carousel">
				<ons-carousel-item>アイテム1 (swipeableのみ)</ons-carousel-item>
				<ons-carousel-item>アイテム2</ons-carousel-item>
				<ons-carousel-item>アイテム3</ons-carousel-item>
			</ons-carousel>

			<ons-carousel swipeable auto-scroll class="carousel">
				<ons-carousel-item>アイテム1 (+ auto-scroll)</ons-carousel-item>
				<ons-carousel-item>アイテム2</ons-carousel-item>
				<ons-carousel-item>アイテム3</ons-carousel-item>
			</ons-carousel>

			<ons-carousel swipeable auto-scroll overscrollable class="carousel">
				<ons-carousel-item>アイテム1 (+ overscrollable)</ons-carousel-item>
				<ons-carousel-item>アイテム2</ons-carousel-item>
				<ons-carousel-item>アイテム3</ons-carousel-item>
			</ons-carousel>

			<ons-carousel swipeable auto-scroll overscrollable initial-index="1" class="carousel">
				<ons-carousel-item>アイテム1</ons-carousel-item>
				<ons-carousel-item>アイテム2</ons-carousel-item>
				<ons-carousel-item>アイテム3</ons-carousel-item>
			</ons-carousel>

			<ons-carousel swipeable auto-scroll overscrollable item-width="100px" class="carousel2">
				<ons-carousel-item>アイテム1</ons-carousel-item>
				<ons-carousel-item>アイテム2</ons-carousel-item>
				<ons-carousel-item>アイテム3</ons-carousel-item>
				<ons-carousel-item>アイテム4</ons-carousel-item>
				<ons-carousel-item>アイテム5</ons-carousel-item>
			</ons-carousel>

			<ons-carousel swipeable auto-scroll overscrollable direction="vertical" class="carousel3">
				<ons-carousel-item>アイテム1</ons-carousel-item>
				<ons-carousel-item>アイテム2</ons-carousel-item>
				<ons-carousel-item>アイテム3</ons-carousel-item>
			</ons-carousel>

			<ons-carousel swipeable auto-scroll overscrollable direction="vertical" item-height="100px" class="carousel3">
				<ons-carousel-item>アイテム1</ons-carousel-item>
				<ons-carousel-item>アイテム2</ons-carousel-item>
				<ons-carousel-item>アイテム3</ons-carousel-item>
				<ons-carousel-item>アイテム4</ons-carousel-item>
				<ons-carousel-item>アイテム5</ons-carousel-item>
			</ons-carousel>
		</div>
	</ons-page>
</ons-navigator>

CSS

全画面表示でない場合、heightの指定が必要になります。

.carousel  {
	height: 100px;
	margin: 20px 0;
}
.carousel2 {
	width: 300px;
	height: 100px;
	margin: 20px auto;
}
.carousel3 {
	width: 200px;
	height: 200px;
	margin: 20px auto;
}
ons-carousel-item {
	background: #eeeeee;
}

カルーセルのデモページ
 

全画面で表示させたい場合、ons-carouselにfullscreen属性を追加します。

HTML

<ons-navigator var="myNavigator">
	<ons-page>
		<div class="contents">
			<ons-carousel fullscreen swipeable auto-scroll overscrollable>
				<ons-carousel-item>
					<div>アイテム1</div>
				</ons-carousel-item>
				<ons-carousel-item>
					<div>アイテム2</div>
				</ons-carousel-item>
				<ons-carousel-item>
					<div>アイテム3</div>
				</ons-carousel-item>
			</ons-carousel>
		</div>
	</ons-page>
</ons-navigator>

全画面のカルーセルのデモページ

swipeable スワイプやドラッグでカルーセルを移動できるように設定。
auto-scroll カルーセルの位置を自動で調整するように設定。
overscrollable カルーセルの端まで移動したときにバウンドするように設定。
initial-index 最初に表示する要素の設定。
direction カルーセルの移動する方向を設定。
horizonal: 水平方向(初期値)
vertical: 垂直方向
item-width ons-carousel-itemの幅を指定。
directionがhorizonalのときのみ有効。
複数の要素を表示させたいときに使用。
item-height ons-carousel-itemの高さを指定。
directionがverticalのときのみ有効。
複数の要素を表示させたいときに使用。
fullscreen カルーセルを全画面表示にする。

 

ons-carouselのメソッド・イベント

ons-carouselのメソッドとイベントを試してみます。

HTML

<ons-navigator var="myNavigator">
	<ons-page>
		<div class="contents">
			<ons-carousel var="carousel" swipeable auto-scroll overscrollable class="carousel">
				<ons-carousel-item ng-repeat="item in carouselItem">{{item}}</ons-carousel-item>
			</ons-carousel>

			<ons-button ng-click="carouselPrev()">prev</ons-button>
			<ons-button ng-click="carouselNext()">next</ons-button>
			<ons-button ng-click="carouselFirst()">first</ons-button>
			<ons-button ng-click="carouselLast()">last</ons-button>
			<ons-button ng-click="carousel3()">3番目</ons-button>
			<ons-button ng-click="getActive()">active</ons-button>
			<ons-button ng-click="carouselItemAdd()">末尾に追加</ons-button>
			<ons-button ng-click="carouselSetSwipeable()">swipe</ons-button>
			<ons-button ng-click="carouselSetAutoScrollEnabled()">autoscroll</ons-button>
			<ons-button ng-click="carouselSetOverscrollable()">overscroll</ons-button>
			<ons-button ng-click="carouselSetDisabled()">disabled</ons-button>
		</div>
	</ons-page>
</ons-navigator>

JavaScript

var app = angular.module('app', ['onsen']);
app.controller('app_Ctrl', function($scope, $timeout) {
	// カルーセルで表示する要素
	$scope.carouselItem = ['アイテム1', 'アイテム2', 'アイテム3', 'アイテム4', 'アイテム5'];
	// 前へ
	$scope.carouselPrev = function() {
		carousel.prev();
	}
	// 次へ
	$scope.carouselNext = function() {
		carousel.next();
	}
	// 先頭へ
	$scope.carouselFirst = function() {
		carousel.first();
	}
	// 最後へ
	$scope.carouselLast = function() {
		carousel.last();
	}
	// 3番目へ
	$scope.carousel3 = function() {
		carousel.setActiveCarouselItemIndex(2);
	}
	// 表示されているインデックスを返す
	$scope.getActive = function() {
		console.log(carousel.getActiveCarouselItemIndex());
	}
	// 追加
	$scope.carouselItemAdd = function() {
		$scope.carouselItem.push('追加アイテム');
		$timeout(function() {
			carousel.refresh();
		});
	}
	// スワイプできるかどうかの設定
	$scope.carouselSetSwipeable = function() {
		if(carousel.isSwipeable()) {
			carousel.setSwipeable(false);
		} else {
			carousel.setSwipeable(true);
		}
	}
	// オートスクロールの設定
	$scope.carouselSetAutoScrollEnabled = function() {
		if(carousel.isAutoScrollEnabled()) {
			carousel.setAutoScrollEnabled(false);
		} else {
			carousel.setAutoScrollEnabled(true);
		}
	}
	// オーバースクロールの設定
	$scope.carouselSetOverscrollable = function() {
		if(carousel.isOverscrollable()) {
			carousel.setOverscrollable(false);
		} else {
			carousel.setOverscrollable(true);
		}
	}
	// disabled状態にするかどうかの設定
	$scope.carouselSetDisabled = function() {
		if(carousel.isDisabled()) {
			carousel.setDisabled(false);
		} else {
			carousel.setDisabled(true);
		}
	}
	ons.ready(function() {
		// 変更後
		carousel.on('postchange', function(e) {
			console.group('postchange');
			console.log(e.carousel);
			console.log(e.activeIndex);
			console.log(e.lastActiveIndex);
			console.groupEnd();
		});

		// 更新時
		carousel.on('refresh', function(e) {
			console.group('refresh');
			console.log(e.carousel);
			console.groupEnd();
		});

		// オーバースクロール時
		carousel.on('overscroll', function(e) {
			console.group('overscroll');
			console.log(e.carousel);
			console.log(e.activeIndex);
			console.log(e.direction);
			console.log(e.waitToReturn);
			console.groupEnd();
		});
	});
});

カルーセルのメソッド・イベントのデモページ

prev() 前のカルーセルを表示。
next() 次のカルーセルを表示。
first() 先頭のカルーセルを表示。
last() 最後のカルーセルを表示。
setActiveCarouselItemIndex(index) indexのカルーセルを表示。
getActiveCarouselItemIndex() 現在表示しているカルーセルのインデックスを返す。
refresh() カルーセルを更新。
isSwipeable() スワイプできるかどうかを返す。
setSwipeable(boolean) スワイプできるかどうかを設定。
isAutoScrollEnabled() オートスクロールが設定されているかどうかを返す。
setAutoScrollEnabled(boolean) オートスクロールするかどうかを設定。
isOverscrollable() オーバースクロールが設定されているかどうかを返す。
setOverscrollable(boolean) オーバースクロールするかどうかを設定。
isDisabled() カルーセルががdisabled状態かどうかを返す。
setDisabled(boolean) カルーセルををdisabled状態にするかどうかを設定。
postchange カルーセルの変更後に発火。
refresh カルーセルの更新時に発火。
overscroll オーバースクロール時に発火。

 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP