微客导航 » 文章资讯 » Angularjs中使用轮播图指令swiper

Angularjs中使用轮播图指令swiper

2024-02-21 19:14:02 319

我们在angualrjs移动开发中遇到轮播图的功能

安装swiper npminstall--saveswiper 或者bowerinstall--saveswiper

引入文件路径

指令中的编写方式

(function(){
'usestrict';
angular
.module('campus.core')//对应项目的module请换成自己的模块名称
.directive('swipers',swipers);
swipers.$inject=['$timeout'];
functionswipers($timeout){
return{
restrict:"EA",
scope:{
data:"="
},
template:''+
''+
''+
''+
''+
''+
'

'+ '

', link:function(scope,element,attrs){ $timeout(function(){ varswiper=newSwiper('.swiper-container',{//轮播图绑定样式名 pagination:'.swiper-pagination', paginationClickable:true, autoplay:2500, }); },100); } }; } })();

data绑定接口返回的轮播列表vm.home.headImgs对应轮播图返回的数据列表

以上所述是小编给大家介绍的Angularjs中使用轮播图指令swiper，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

返回顶部
3162201930
czq8825@qq.com

Angularjs中使用轮播图指令swiper

热门推荐

随机推荐