在angular中使用swiper插件轮播无效的原因

 

　　我在angular中使用swiper插件时总会出现轮播不运行。

 

　　做项目么，肯定会使用路由实现切换的效果，我在做项目时总喜欢先把内容渲染在主页面上，当所要实现的效果都实现时，然后再把数据拿出来放在子页面上，通俗的讲就是把他放在另一个页面上，通过路由去获取信息。

　　1、在用路由中实现时一定要在路由里加上控制器controller

 

app.config(function ($routeProvider) { 2     $routeProvider.when('/index', { 3         templateUrl: 'libs/index1.html', 4         controller:"test"
 }).otherwise({ 6         redirectTo: '/index'
 }) 8 }

　　2、如果是在json中获取数据，要把轮播js代码写在获取数据中,因为他是先获取数据才执行轮播的，如果你把他放在外部，实行轮播数据获取不到。

var app = angular.module("mk", ["ngRoute"]); app.controller("test", function ($scope, $http) { $http.get('../json/index.json').success(function (data) { $scope.Y_indexLunbo = data.Y_indexBox.Y_indexLunbo; //轮播js
        var mySwiper = new Swiper('.Y_Img',{ loop: true,  observer:true,  autoplay:4000, paginationClickable :true, autoplayDisableOnInteraction : false, prevButton:".swiper-button-prev", nextButton:".swiper-button-next" }); }) }); 

　3、还有就是在轮播里observer：true也是必不可少的。
　你们在用swiper插件时最好给图片或图片的父级给 予宽高，这样会避免一些不必要的错误。