在angular中使用swiper插件輪播無效的緣由

 

　　我在angular中使用swiper插件時總會出現輪播不運行。

 

　　作項目麼，確定會使用路由實現切換的效果，我在作項目時總喜歡先把內容渲染在主頁面上，當所要實現的效果都實現時，而後再把數據拿出來放在子頁面上，通俗的講就是把他放在另外一個頁面上，經過路由去獲取信息。

　　一、在用路由中實現時必定要在路由里加上控制器controller

 

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

　　二、若是是在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" }); }) }); 

　三、還有就是在輪播裏observer：true也是必不可少的。
　大家在用swiper插件時最好給圖片或圖片的父級給 予寬高，這樣會避免一些沒必要要的錯誤。