Use carousel graph command swiper in Angularjs

We encounter the function of carousel graphs in angualrjs mobile development

Installswiper npm install --save swiperorbower install --save swiper

Introduce file path

<link rel="stylesheet" href="../bower_components/swiper/dist/css/" rel="external nofollow" />
<script src="../bower_components/swiper/dist/js/"></script>

How to write in directives

(function() {
 'use strict';
 angular
  .module('') //Replace the module of the corresponding project with your own module name  .directive('swipers',swipers);
  swipers.$inject = ['$timeout'];
  function swipers($timeout) {
   return {
    restrict: "EA",
    scope: {
     data:"="
    },
    template: '&lt;div class="swiper-container silder"&gt;'+
        '&lt;ul class="swiper-wrapper"&gt;'+
        '&lt;li class="swiper-slide" ng-repeat="item in data"&gt;'+
        '&lt;a class="img40" href="{{}}" rel="external nofollow" &gt;&lt;img ng-src="{{}}" alt="" /&gt;&lt;/a&gt;'+
        '&lt;/li&gt;'+
        '&lt;/ul&gt;'+
        '&lt;div class="swiper-pagination"&gt;&lt;/div&gt;'+
        '&lt;/div&gt;',
    link: function(scope, element, attrs) {
       $timeout(function(){
         var swiper = new Swiper('.swiper-container', { //The carousel image binding style name          pagination: '.swiper-pagination',  
          paginationClickable: true,    
          autoplay: 2500,
        }); 
       },100); 
    }
   };
  }
})();

data The carousel list returned by the binding interface The data list returned by the corresponding carousel chart

 &lt;!--Carousel--&gt;
 &lt;swipers data="" &gt;&lt;/swipers&gt;

The above is the use of carousel image command swiper in Angularjs introduced to you by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply to everyone in time!