swiper轮播图+angular自定义指令

最新推荐文章于 2024-06-12 10:01:05 发布

Z_BuzzLightyear

最新推荐文章于 2024-06-12 10:01:05 发布

阅读量901

点赞数

分类专栏： AngularJS 1.x版本学习文章标签： AngularJs swiper轮播图

本文链接：https://blog.csdn.net/BuzzEQ/article/details/80895180

版权

AngularJS 1.x版本学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

swiper轮播图+angular自定义指令

下载所与需要的库文件
- 直接下载所需要的库文件，网址：http://www.swiper.com.cn/
- npm install
```
npm install swiper@3.4.2 --save
```
- Bower install
```
bower install swiper#3.4.2 --save 
```
- 说明
注意：我所使用的Swiper的版本，截止到2017-12-05，Swiper已经更新到了4.0.x版本。4.0版本和3.新版本是有差异的。

文件库

<script type="text/JavaScript" src="components/angular/angular.js"></script>
<script src="components/swiper/dist/js/swiper.js"></script>

<link rel="stylesheet" href="components/swiper/dist/css/swiper.min.css" />

Exp:

    <html>
        <head>
        <link rel="stylesheet" href="components/swiper/dist/css/swiper.min.css" />
        </head>
        <body>
            <script type="text/JavaScript" src="components/angular/angular.js"></script>
            <script src="components/swiper/dist/js/swiper.js"></script>
            <script type="text/JavaScript" src="js/index.js"></script>

        </body>
</html>

指令编写

.directive('swipers',['$timeout',function($timeout){
      return{
          restrict: 'EA',
          scope:{
              data:'=data'
          },
          template: '<div class="swiper-container">'+
          '<div class="swiper-wrapper">'+
          '<div class="swiper-slide" ng-repeat="item in data">'+
        '<img ng-src="{{item}}" alt="" />'+
          '</div>'+
          '</div>'+
          ' <div class="swiper-pagination"></div>'+
          '<div class="swiper-button-prev"></div>'+
          '<div class="swiper-button-next"></div>'+
          '</div>',
          controller:["$scope", function ($scope) {}],
          link: function (scope, element, attrs) {
              $timeout(function(){
                  var mySwiper = new Swiper('.swiper-container', {
                      // autoplay: 1000,//自动播放
                      autoplayDisableOnInteraction : false,
                      // loop:true,//循环播放
                      // initialSlide :1,//从哪开始轮播
                      pagination : '.swiper-pagination',//轮播图导航
                      paginationClickable :true,//是否可以点击导航
                      speed:2500,//轮播的速度
                      prevButton:'.swiper-button-prev',//上一张按钮
                      nextButton:'.swiper-button-next',//下一张按钮
                      observer:true,
                      observeParents:true
                  })
          },100); 
          }
      }
  }]);

测试数据

app.controller('swiperCtrl', ['$scope', function ($scope) {
      $scope.data = {
          home: {
              homeImgs: ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg"]
          }
      };
  }])

使用自定义标签

<swipers data="data.home.homeImgs" ></swipers>

属性

官方文档

问题

swiper有时候不能自动滚动的问题

//在new swiper对象的时候加上一下代码
observer:true,
observeParents:true

new swiper的时候的属性（通过指令设置）

html代码

<swipers data="data.home.homeImgs" loop="false" pagination ="true" prev-button="true" next-button="true" autoplay="1000"></swipers>

指令代码

.directive('swipers',['$timeout',function($timeout){
        return{
            restrict: 'EA',
            scope:{
                data:'=data',
                loop:'=loop',
                pagination:'=pagination',
                prevButton:'=prevButton',
                nextButton:'=nextButton',
                autoplay:'=autoplay'
            },
            template: '<div class="swiper-container">'+
            '<div class="swiper-wrapper">'+
            '<div class="swiper-slide" ng-repeat="item in data">'+
          '<img ng-src="{{item}}" alt="" />'+
            '</div>'+
            '</div>'+
            ' <div class="swiper-pagination" ng-if="pagination"></div>'+
            '<div class="swiper-button-prev" ng-if="prevButton"></div>'+
            '<div class="swiper-button-next" ng-if="nextButton"></div>'+
            '</div>',
            controller:["$scope", function ($scope) {}],
            link: function (scope, element, attrs) {
                alert(scope.autoplay);
                var autoplayTime;
                if(!scope.autoplay){
                    autoplayTime = 0;
                }else{
                    autoplayTime = scope.autoplay;
                }
                $timeout(function(){
                    var mySwiper = new Swiper('.swiper-container', {
                        autoplay: autoplayTime,//自动播放
                        autoplayDisableOnInteraction : false,
                        loop:scope.loop,
                        // initialSlide :1,
                        pagination : '.swiper-pagination',//导航按钮
                        paginationClickable :true,//点击导航按钮
                        speed:2500,//切换速度
                        prevButton:'.swiper-button-prev',//向前按钮
                        nextButton:'.swiper-button-next',//向后按钮
                        observer:true,
                        observeParents:true
                    })
            },100); 
            }
        }
    }])

Z_BuzzLightyear

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
swiper轮播图+angular自定义指令

swiper轮播图+angular自定义指令下载所与需要的库文件直接下载所需要的库文件，网址：http://www.swiper.com.cn/npm installnpm install swiper@3.4.2 --saveBower installbower install swiper#3.4.2 --save 说明注意：我所使用的Swiper的版本，截止到...
复制链接

扫一扫

专栏目录