我在angular中使用swiper插件时总会出现轮播不运行。
做项目么,肯定会使用路由实现切换的效果,我在做项目时总喜欢先把内容渲染在主页面上,当所要实现的效果都实现时,然后再把数据拿出来放在子页面上,通俗的讲就是把他放在另一个页面上,通过路由去获取信息。
1、在用路由中实现时一定要在路由里加上控制器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 }
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插件时最好给图片或图片的父级给 予宽高,这样会避免一些不必要的错误。