Angularjs中使用輪播圖指令swiper
更新時(shí)間：2017年05月30日 09:15:00 作者：科比net
這篇文章主要介紹了Angularjs中使用輪播圖指令swiper的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下
我們?cè)赼ngualrjs移動(dòng)開(kāi)發(fā)中遇到輪播圖的功能
安裝 swiper npm install --save swiper 或者 bower install --save swiper
引入文件路徑
<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>
指令中的編寫(xiě)方式
(function() {
'use strict';
angular
.module('campus.core') //對(duì)應(yīng)項(xiàng)目的module 請(qǐng)換成自己的模塊名稱(chēng)
.directive('swipers',swipers);
swipers.$inject = ['$timeout'];
function swipers($timeout) {
return {
restrict: "EA",
scope: {
data:"="
},
template: '<div class="swiper-container silder">'+
'<ul class="swiper-wrapper">'+
'<li class="swiper-slide" ng-repeat="item in data">'+
'<a class="img40" href="{{item.contentUrl}}" rel="external nofollow" ><img ng-src="{{item.imgId}}" alt="" /></a>'+
'</li>'+
'</ul>'+
'<div class="swiper-pagination"></div>'+
'</div>',
link: function(scope, element, attrs) {
$timeout(function(){
var swiper = new Swiper('.swiper-container', { //輪播圖綁定樣式名
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 2500,
});
},100);
}
};
}
})();
data 綁定接口返回的輪播列表 vm.home.headImgs對(duì)應(yīng)輪播圖返回的數(shù)據(jù)列表
<!--輪播圖--> <swipers data="vm.home.headImgs" ></swipers>
以上所述是小編給大家介紹的Angularjs中使用輪播圖指令swiper ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
Angular中實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)視圖實(shí)例代碼
近兩年當(dāng)中使用Angular開(kāi)發(fā)過(guò)很多項(xiàng)目，其中也涉及到一些樹(shù)形結(jié)構(gòu)視圖的顯示，最近的在項(xiàng)目中封裝了大量的組件，一些組件也有樹(shù)形結(jié)構(gòu)的展示，所以寫(xiě)出來(lái)總結(jié)一下。2017-05-05
Angular2應(yīng)用程序?qū)嶋H上是有很多父子組價(jià)組成的組件樹(shù)，因此，了解組件之間如何通信，特別是父子組件之間，對(duì)編寫(xiě)Angular2應(yīng)用程序具有十分重要的意義。下面通過(guò)本文給大家介紹Angular2 組件交互知識(shí)，感興趣的朋友一起看看吧2017-08-08
angularJS Provider、factory、service詳解及實(shí)例代碼
這篇文章主要介紹了angularJS Provider詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色效果
這篇文章給大家介紹了如何利用AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色的效果，文中提供了實(shí)例代碼，對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，下面來(lái)一起看看吧。2016-09-09
Angularjs中三種數(shù)據(jù)的綁定策略(“@”，“=”，“&”)
在AngularJS的指令中存在著三種綁定策略，他們分別是’=’,’@’,’&’。下面這篇文章主要介紹了Angularjs中這三種數(shù)據(jù)的綁定策略，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-12-12
angular 實(shí)現(xiàn)同步驗(yàn)證器跨字段驗(yàn)證的方法
幾乎每個(gè)web應(yīng)用都會(huì)用到表單，那么驗(yàn)證器就是必不可少的東西，這篇文章主要介紹了angular 實(shí)現(xiàn)同步驗(yàn)證器跨字段驗(yàn)證的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-04-04
AngularJS前端頁(yè)面操作之用戶修改密碼功能示例
這篇文章主要介紹了AngularJS前端頁(yè)面操作之用戶修改密碼功能,結(jié)合具體實(shí)例形式分析了AngularJS針對(duì)前端用戶修改密碼的判斷操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
AngularJS實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實(shí)例
這篇文章給大家分享了AngularJS循環(huán)實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等基礎(chǔ)功能，對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，有需要的朋友可以看看。2016-09-09
本篇文章主要介紹了詳解如何在Angular中快速定位DOM元素，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05