Partage d'exemples de code sur la façon d'utiliser le swiper de commande carrousel dans Angularjs

Cet article présente principalement les connaissances pertinentes sur l'utilisation du swiper de commande carrousel dans Angularjs Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Nous avons rencontré la fonction carrousel dans le développement mobile anualrjs

Installation ou swiper  npm install --save swiperbower install --save swiper

Présentation du chemin du fichier

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

La méthode d'écriture dans la commande

(function() {
 'use strict';
 angular
  .module('campus.core') //对应项目的module 请换成自己的模块名称
  .directive('swipers',swipers);
  swipers.$inject = ['$timeout'];
  function swipers($timeout) {
   return {
    restrict: "EA",
    scope: {
     data:"="
    },
    template: &#39;<p class="swiper-container silder">&#39;+
        &#39;<ul class="swiper-wrapper">&#39;+
        &#39;<li class="swiper-slide" ng-repeat="item in data">&#39;+
        &#39;<a class="img40" href="{{item.contentUrl}}" rel="external nofollow" ><img ng-src="{{item.imgId}}" alt="" /></a>&#39;+
        &#39;</li>&#39;+
        &#39;</ul>&#39;+
        &#39;<p class="swiper-pagination"></p>&#39;+
        &#39;</p>&#39;,
    link: function(scope, element, attrs) {
       $timeout(function(){
         var swiper = new Swiper(&#39;.swiper-container&#39;, { //轮播图绑定样式名
          pagination: &#39;.swiper-pagination&#39;,  
          paginationClickable: true,    
          autoplay: 2500,
        }); 
       },100); 
    }
   };
  }
})();

liaison de données

InterfaceLa liste du carrousel renvoyée vm.home.headImgs correspond à l'image du carrousel Liste des données renvoyées

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!