Простой слайдер изображений и контента на 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.

Заключение

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