swiper.js在angular里使用的一些问题

因为项目的框架用的是angular,而轮播用的是swiper.js,这个插件做轮播很高效和实用，不过可能angular也不是很熟，照着官方文档把swiper.js引入的时候，发现第一张图片永远是一闪而过，这就很尴尬，问题可能是我的轮播图片是通过ng-repeat从后台拿出来的数据。

swiper的机制是：初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块，则允许滑动多少个块。 而在angular始终在swiper初始化之后定义，swiper则无法正确scan有多少个slide（实际上找到一个待循环模板），所以划不动。现在直接贴出高效的解决方案，直接在js处理下控制器和swiper就可以：

js中代码：

//定义重定向，angularjs前台数据循环完了调用swiper.js代码

app.directive('repeatDone',function(){

return{

link:function(scope,element,attr){

if(scope.$last){

scope.$eval(attr.repeatDone);

}

}

}

}).controller('mainCtrl', ['$scope','$timeout',

function ($scope,$timeout) {

$scope.isRepeat=function(){

$timeout(function(){

var productDetailSlide=new Swiper('.swiper-container',{

autoplay:2500,

autoplayDisableOnInteraction:false,

pagination : '.swiper-pagination',

paginationClickable: true,

longSwipesRatio: 0.3,

touchRatio:1,

loop:true,

observer:true,//修改swiper自己或子元素时，自动初始化swiper

observeParents:true,//修改swiper的父元素时，自动初始化swiper

// 如果需要前进后退按钮

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

})

$(".swiper-container").mouseenter(function () {//滑过悬停

productDetailSlide.stopAutoplay();//mySwiper 为上面你swiper实例化的名称

}).mouseleave(function(){//离开开启

produc

tDetailSlide.startAutoplay(); }})]

以上代码，就是加了一个重定向和定时函数，前端页面还是直接用swiper.js的插件的内容：