Creating a Slide Show Plugin With AngularJS - SitePoint

This tutorial demonstrates building a slideshow plugin using AngularJS, eschewing jQuery for a cleaner, more concise codebase. We leverage Angular directives and animations to achieve this. Familiarity with AngularJS directives is assumed.

Key Advantages:

• Reduced code compared to jQuery-based solutions.
• Seamless integration into existing AngularJS applications via directives and animations.
• No jQuery required.
• Responsive design achievable through CSS media queries.
• Easily customizable with captions, navigation, and looping (carousel) effects.

Step 1: Defining the AngularJS Directive

We begin by creating an isolated AngularJS directive named slider:

<code class="language-javascript">var sliderApp = angular.module('sliderApp', ['ngAnimate']); // Note: ngAnimate included

sliderApp.directive('slider', function($timeout) {
  return {
    restrict: 'AE',
    replace: true,
    scope: {
      images: '='
    },
    link: function(scope, elem, attrs) {
      scope.currentIndex = 0;

      scope.next = function() {
        scope.currentIndex = (scope.currentIndex + 1) % scope.images.length;
      };

      scope.prev = function() {
        scope.currentIndex = (scope.currentIndex - 1 + scope.images.length) % scope.images.length;
      };

      scope.$watch('currentIndex', function() {
        scope.images.forEach(function(image) {
          image.visible = false;
        });
        scope.images[scope.currentIndex].visible = true;
      });

      var timer;
      var sliderFunc = function() {
        timer = $timeout(function() {
          scope.next();
          timer = $timeout(sliderFunc, 5000); // Adjust interval as needed
        }, 5000);
      };

      sliderFunc();

      scope.$on('$destroy', function() {
        $timeout.cancel(timer);
      });
    },
    templateUrl: 'templates/templateurl.html'
  };
});</code>

The scope is isolated to prevent conflicts with parent scopes. The images attribute receives an array of image objects from the parent scope. ngAnimate is included for animation support.

Step 2: Image Data Controller

A controller provides the image data:

<code class="language-javascript">sliderApp.controller('SliderController', function($scope) {
  $scope.images = [
    { src: 'img1.png', title: 'Pic 1' },
    { src: 'img2.jpg', title: 'Pic 2' },
    { src: 'img3.jpg', title: 'Pic 3' },
    { src: 'img4.png', title: 'Pic 4' },
    { src: 'img5.png', title: 'Pic 5' }
  ];
});</code>

Step 3: Directive Template (templates/templateurl.html)

The directive's HTML template uses ng-repeat to display images:

<code class="language-html"><div class="slider">
  <div class="slide" ng-repeat="image in images" ng-show="image.visible">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Creating a Slide Show Plugin With AngularJS - SitePoint">
    <p>{{image.title}}</p> </div>
  <div class="arrows">
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" ng-click="prev()"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174018895287877.png" class="lazy" alt="Creating a Slide Show Plugin With AngularJS - SitePoint"></a>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" ng-click="next()"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174018895383537.png" class="lazy" alt="Creating a Slide Show Plugin With AngularJS - SitePoint"></a>
  </div>
</div></code>

Step 4: CSS Animations

Add CSS for smooth transitions (adjust timing as desired):

<code class="language-css">.slide.ng-hide-add, .slide.ng-hide-remove {
  transition: opacity 0.5s linear;
}
.slide.ng-hide-add.ng-hide-add-active, .slide.ng-hide-remove {
  opacity: 0;
}
.slide.ng-hide-add, .slide.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}</code>

Step 5: Using the Directive

In your main HTML, include the directive and controller:

<code class="language-html"><div ng-controller="SliderController">
  <slider images="images"></slider>
</div></code>

Remember to include necessary CSS for styling the slider. This enhanced example includes automatic slideshow functionality and improved error handling. Remember to replace placeholder image paths with your actual image URLs. The alt attributes are added for accessibility.

The above is the detailed content of Creating a Slide Show Plugin With AngularJS - SitePoint. For more information, please follow other related articles on the PHP Chinese website!