Sharing code examples of how to use the carousel command swiper in Angularjs

This article mainly introduces the relevant knowledge of using the carousel command swiper in Angularjs. It is very good and has reference value. Friends who need it can refer to it

We encountered the carousel function in angualrjs mobile development

Installation swiper npm install --save swiper Or bower install - -save swiper

Introduction file path

<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>

Writing method in the instruction

(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);
    }
   };
  }
})();

data bindingInterfaceReturned carousel list vm .home.headImgs corresponds to the data list returned by the carousel chart

<!--轮播图-->
<swipers data="vm.home.headImgs" ></swipers>

The above is the detailed content of Sharing code examples of how to use the carousel command swiper in Angularjs. For more information, please follow other related articles on the PHP Chinese website!