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

    Заключение


    В этой статье я рассмотрел только основные принципы, которые были положены в основу этого модуля. Сам модуль на данный момент имеет еще функционал автоплея, смены задержки между слайдами, возможность добавления элементов ручной прокрутки слайдов и возможность задания анимации для каждого слайда отдельно. Надеюсь модуль будет кому-нибудь полезен и буду благодарен всякой помощи в его развитии.
    • +9
    • 22.3k
    • 6
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 6

      –1
      Я извиняюсь, конечно, но при чем тут ангуляр? Кроме размещения контента, с чем можно было справиться и любым другим шаблонизатором.
      Куда разумнее вынести в отдельную сущность все, максимально независимую. Уже отвязанную от контента.
      С таким же успехом это мог бы быть и jQuery плагин.

      Про то что тысячи слайдеров уже сделаны — молчу-молчу.

      Кстати, а переход к конкретному слайду сделаете?
        +1
        данный пример показывает работу модуля ngAnimate, который фактически сам определяет длительность анимации и когда ее нужно включить и выключить, конечно, аналог можно сделать и на jQuery, но он будет намного масивнее, а я хотел показать как минималистично может быть решение на AngularJS.

        Да, переход к конкретному слайду есть, я забыл про него написать, функция setIndex
          0
          Ну, просто из всего модуля тут видно только двадцать строк стилей :) Больше про него ничего непонятно.
        0
        С подобной задачей сталкивался и я. Мое решение на git. Кроме того, что слайдер там добавляется одной строчкой, он также адаптивный. Есть возможность задать две текстовые метки к каждому слайду, которые также поддерживают анимацию. Переключиться к любому слайду. Смена слайдов останавливается при наведении курсора мыши. Анимация реализована с помощью css.
          0
          Зачем HTML-код сжал в демке?)))
            0
            Вы о чем?:) html-код я точно нигде не сжимал

          Only users with full accounts can post comments. Log in, please.