Карусель в AngularJS

• 12, 18, 2013
•  bullgare
•  Angular.js
• No Comments.

Сделать самому непросто.
Предварительный вариант. Надеюсь, потом получится что-то более интересное.

Пока сводится к:

<ul
class="list-photo"
style="-webkit-transform: [[(movedBy && 'translate3d(' + movedBy + 'px, 0px, 0)') || 0]]"
ng-touchstart="touchStart($event)"
ng-touchmove="touchMove($event)"
ng-touchend="touchEnd($event)"
ng-touchcancel="touchEnd($event)">

<li ng-repeat="photo in photos"
ng-if="isPhotoClose($index)"
ng-style="{left: (getPhotoOffset($index) * 100) + '%'}"
class="list-photo_item"
ng-swipe-right="moveLeft();"
ng-swipe-left="moveRight();"
ng-class="{
'swipe-animation': true,
'slide-left': $index == currentPos && slideDir == 'left',
'slide-right': $index == currentPos && slideDir == 'right'
}"
><img
class="list-photo_item_img b-loader"
ng-src-preload="isPhotoClose($index) && photo.hugePhotoUrl"
alt="" />
</li>
</ul>

css:

.swipe-animation
{
	&.slide-left {
		animation: slideInLeft 0.3s;
		-webkit-animation: slideInLeft 0.3s;
	}

	&.slide-right {
		animation: slideInRight 0.3s;
		-webkit-animation: slideInRight 0.3s;
	}
	.slide-left-active, .slide-right-active {
		z-index: 1000;
	}
}

@-webkit-keyframes slideInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-70%);
		transform: translateX(-70%);
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes slideInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-70%);
		-ms-transform: translateX(-70%);
		transform: translateX(-70%);
	}

	100% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes slideOutLeft {
	0% {
		-webkit-transform: translateX(-30%);
		-ms-transform: translateX(-30%);
		transform: translateX(-30%);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

@-webkit-keyframes slideOutLeft {
	0% {
		-webkit-transform: translateX(-30%);
		-ms-transform: translateX(-30%);
		transform: translateX(-30%);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

@-webkit-keyframes slideInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(70%);
		transform: translateX(70%);
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(70%);
		-ms-transform: translateX(70%);
		transform: translateX(70%);
	}

	100% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes slideOutRight {
	0% {
		-webkit-transform: translateX(30%);
		-ms-transform: translateX(30%);
		transform: translateX(30%);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
}
@-webkit-keyframes slideOutRight {
	0% {
		-webkit-transform: translateX(30%);
		-ms-transform: translateX(30%);
		transform: translateX(30%);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
}

Вот полезные слайды на тему — https://speakerdeck.com/auser/going-mobile-with-angular?slide=73 (видео — http://youtu.be/xOAG7Ab_Oz0), только нужно учесть, что придётся использовать ngAnimate и множество других особенностей, всё можно посмотреть в исходных кодах на https://neverforgetbirthday.appspot.com/#/.

Вот неплохая каруселька готовая для AngularJS https://github.com/revolunet/angular-carousel (демки — http://blog.revolunet.com/angular-carousel/), но у меня с ней не пошло.
Вообще отлично сделано у мобильного вконтактика — http://m.vk.com/feed?z=photo-24098496_316623446%2Fwall673225_3313, но там не совсем ангуляр ;)
Про ng-swipe и анмацию — http://stackoverflow.com/questions/18693505/angularjs-1-2-different-animation-based-on-left-swipe-or-right-swipe.
Хороший swipe-слайдер, но без AngularJS — http://swipejs.com/ (http://bradbirdsall.com/swipe-js-a-lightweight-mobile-web-slider).