AngularJSの画像とコンテンツのシンプルなスライダー

現在、ネットワークには、何らかの方法でスライドの変更を実装する既製のソリューションが数多くあります。 それらのほとんどは、javascriptによるアニメーションに基づいています。 この記事では、AngularJSがCSS3とともにどのような機会を開くかを示したいと思います。 私は、自分のニーズに合わせて簡単に追加および変更できるミニマルでシンプルなモジュールを作成するタスクを設定しました。独自のスライド切り替え効果を作成することもできます。



GitHubプロジェクトの デモ

スライドチェンジ

まず、すべてのスライドを表示しましょう; 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などのアナログのアニメーションに近づけることができます。

おわりに

この記事では、 このモジュールの基礎となった基本原則のみを検討しました。 現在のモジュール自体には、自動再生機能、スライド間の遅延の変更、スライドの手動スクロール要素を追加する機能、各スライドのアニメーションを個別に設定する機能もあります。 このモジュールが誰かに役立つことを願っており、その開発の助けに感謝します。