js
重庆分公司
重庆分公司
var myapp=angular.module("myApp",[]);
//轮播图的控制器
myapp.controller("swiperController",function($scope,$http){
//请求轮播图路径
$http({
method: 'post',
url: 'json/myJson.json'
}).then(function successCallback(response) {
$scope.imgSrcs = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
});
});可是还是不行，注意：如果是在json中获取数据，要把轮播js代码写在获取数据中,因为他是先获取数据才执行轮播的，如果你把他放在外部，实行轮播数据获取不到。
所以解决方案便是将swiper的初始化方法放到$http请求里面执行，
将如下代码加到function successCallback（）方法里面即可实现轮播
var swiper = new Swiper('.swiper-container', {//重置轮播加载方法
pagination: '.swiper-pagination',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
keyboardControl: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true//修改swiper的父元素时，自动初始化swiper
});完整的js代码如下：
var myapp=angular.module("myApp",[]);
//轮播图的控制器
myapp.controller("swiperController",function($scope,$http){
//请求轮播图路径
$http({
method: 'post',
url: 'json/myJson.json'
}).then(function successCallback(response) {
$scope.imgSrcs = response.data.sites;
var swiper = new Swiper('.swiper-container', {//重置轮播加载方法
pagination: '.swiper-pagination',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
keyboardControl: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true//修改swiper的父元素时，自动初始化swiper
});
}, function errorCallback(response) {
// 请求失败执行代码
});
});看完了这篇文章，相信你对“Angular.js中使用Swiper插件不能滑动怎么办”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
