swiperjs如何在angular中使用?

cute_girl
  • 1.4k
<body ng-controller="AppController" ng-cloak>
    <div class="container">
        <div class="top_shuffling swiper-wrapper row">
            <div class="swiper-slide"><img src="img/shufflings/shufflings_1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/shufflings/shufflings_2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/shufflings/shufflings_3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/shufflings/shufflings_4.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/shufflings/shufflings_5.jpg" alt=""></div>
        </div>
    </div>
</body>
App.controller("AppController",function($scope,$timeout){
    $scope.swiper=function(){
        var topSwiper = new Swiper('.top_shuffling',{
            loop: true,
            autoplay:4000,
            paginationClickable :true,
            autoplayDisableOnInteraction : false,
            observer:true,//修改swiper自己或子元素时,自动初始化swiper
            observeParents:true,//修改swiper的父元素时,自动初始化swiper
            prevButton:".swiper-button-prev",
            nextButton:".swiper-button-next"
        });
    }
    $scope.swiper();
})

这样写打开页面不会轮播,求解哪里有问题,angular小白伤不起。。

回复
阅读 1.8k
2 个回答
✓ 已被采纳

用directive包一下可以

把 $scope.swiper=function(){ 改成 function swiper()..试试
不知道你用的哪个Swiper,请说明下文档
$scope是用来和模版交互的

你知道吗?

宣传栏