Простой слайдер изображений и контента на AngularJS

На сегодняшний день в сети есть много готовых решений, которые реализуют тем или иным способом смену слайдов. Большинство из них основаны на анимации через javascript. В этой статье хочу показать какие возможности открывает AngularJS в связке с CSS3. Перед собой я ставил задачу сделать минималистичный и простой модуль, который легко дописывать и видоизменять под свои нужды вплоть до создания собственных эффектов переходов слайдов.

Демо GitHub Project

Смена слайдов

Для начала выведем все слайды, на AngularJS это делается просто при помощи директивы ng-repeat:

// в контроллере задаем массив слайдов $scope.slides = [         { 'image': 'images/image1.png' },         { 'image': 'images/image2.png' } ]; 

в html-шаблоне:

<div ng-repeat="(i, slide) in slides">        <img ng-src="{{ slide.image }}" />  </div> 

В результате у нас есть код, который выведет все слайды (в данном примере — изображения). Теперь нужно заставить их последовательно сменятся через некоторые промежутки времени, но в AngularJS нет аналога функции setInterval, потому для реализации вечного таймера будем циклически вызывать $timeout. Чтобы остановить такой таймер нужно воспользоваться функцией $timeout.cancel.

// функция переключения слайда $scope.next = function() {      var total = $scope.slides.length;      if (total > 0) {          $scope.$slideIndex = ($scope.$slideIndex == total - 1) ? 0 : $scope.$slideIndex + 1;      } }; // функция play запускает таймер, который переключает слайд и вызывает её же повторно $scope.play = function() {      timeOut = $timeout(function() {          $scope.next();          $scope.play();      }, 2000); }; 

Теперь добавим в шаблоне код, который будет отображать только текущий слайд:

<div ng-repeat="(i, slide) in slides" ng-show="i == $slideIndex">         <img ng-src="{{ slide.image }}" /> </div> 

Если выполнить этот код, то у нас будет слайдер, который меняет изображение каждые 2 секунды, но безо всяких эффектов.

Эффекты переходов слайдов

За анимацию элементов в AngularJS отвечает отдельный модуль ngAnimate. Достаточно подключить этот модуль и описать эффекты переходов в css слайды начнут плавно сменять друг друга. Пример эффекта проявления:

.animation-fade.ng-hide-add, .animation-fade.ng-hide-remove {      /* здесь прописаны эффекты проявления и исчезновения слайда */      -webkit-transition: 1s linear all;      -moz-transition: 1s linear all;      -o-transition: 1s linear all;      transition: 1s linear all;      display: block !important; } .animation-fade.ng-hide-add, .animation-fade.ng-hide-remove.ng-hide-remove-active {      /* это стартовая точка анимации исчезновения и конечная точка анимации проявления */      opacity: 1;  } .animation-fade.ng-hide-add.ng-hide-add-active, .animation-fade.ng-hide-remove {      /* это конечная точка анимации исчезновения и стартовая точка анимации проявления */      opacity: 0;      position: absolute; } 

Теперь ко всем слайдам, у которых есть класс animation-fade, будет применен эффект проявления/затухания при переходах.
Модуль ngAnimate позволяет описывать эффекты не только через css, но и через javascript, что позволяет реализовать и более сложную анимацию и приблизить её к таким как у аналогов, например, у nivoSlider.

Заключение

В этой статье я рассмотрел только основные принципы, которые были положены в основу этого модуля. Сам модуль на данный момент имеет еще функционал автоплея, смены задержки между слайдами, возможность добавления элементов ручной прокрутки слайдов и возможность задания анимации для каждого слайда отдельно. Надеюсь модуль будет кому-нибудь полезен и буду благодарен всякой помощи в его развитии.