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

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

Зміна слайдів
Для початку виведемо всі слайди, на 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 .висновок У цій статті я розглянув лише основні принципи , які були покладені в основу цього модуля. Сам модуль на даний момент має ще функціонал автоплея , зміни затримки між слайдами , можливість додавання елементів ручної прокрутки слайдів і можливість завдання анімації для кожного слайда окремо . Сподіваюся модуль буде кому-небудь корисний і буду вдячний будь-якої допомоги в його розвитку.


scripts
971 28.10.13



Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера