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 | オーバースクロール時に発火。 |
【参考サイト】
コメントが承認されるまで時間がかかります。