在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插件時最好給圖片或圖片的父級給 予寬高，這樣會避免一些不必要的錯誤。