Leave a Comment
Карусель в AngularJS
Сделать самому непросто.
Предварительный вариант. Надеюсь, потом получится что-то более интересное.
Пока сводится к:
|
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 |
<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:
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
.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).
Similar Posts
- None Found
LEAVE A COMMENT
Для отправки комментария вам необходимо авторизоваться.