Home  >  Article  >  Web Front-end  >  Sharing code examples of how to use the carousel command swiper in Angularjs

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

黄舟
黄舟Original
2017-05-31 10:21:062332browse

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() {
 &#39;use strict&#39;;
 angular
  .module(&#39;campus.core&#39;) //对应项目的module 请换成自己的模块名称
  .directive(&#39;swipers&#39;,swipers);
  swipers.$inject = [&#39;$timeout&#39;];
  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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn