Swiper中文论坛

标题: 添加 loop : true属性后只轮播一次 [打印本页]

作者: yyyddd1986 时间: 2018-9-26 12:04
标题: 添加 loop : true属性后只轮播一次
要求无限轮播，并且都是从右到左顺序，本以为加上loop : true属性就可以了，发现加上loop : true属性后只轮播一次就不动了，

Html
-
<div class="jb_home_outer">
<div class="jb_yellow" id="jb_yellow"></div>
<div class="jb_content">
      <div class="swiper-container jb_carousel" id="jb_carousel">
         <div class="swiper-wrapper" >
            <div class="swiper-slide" ng-repeat="img in carousel track by $index">
                  <button
                     class="ani"
                     ng-click="homeInfo.CarouselLink(img)"
                        swiper-animate-effect="fadeIn"
                        swiper-animate-duration="3s"
                        swiper-animate-delay=".5s">
                     阅读详情
                  </button>
                  <a href=""
                     class="car"
                     ng-click="homeInfo.CarouselLink(img)">
                     <div class="opcity_bg ani"
                           swiper-animate-effect="shadowLay"
                           swiper-animate-duration="1s"
                           swiper-animate-delay=".5s">
                     </div>
                     <img class="ani"
                           swiper-animate-effect="fadeIn"
                           swiper-animate-duration="1s"
                           swiper-animate-delay=".2s"
                           ng-src="{{img.imgPc}}" alt="{{img.title}}">
                  </a>

                  <div
                     class="jb_carousel_text"
                     id="jb_carousel_text" ng-cloak="">
                     <p class="ani title"
                        swiper-animate-effect="bounceInRight"
                        swiper-animate-duration="1s"
                        swiper-animate-delay="1s">
                        {{img.configXml.title}}
                     </p>
                     <div
                        id="jb_carousel_text01"
                        swiper-animate-effect="fadeInUp"
                        swiper-animate-duration="1.5s"
                        swiper-animate-delay="1s"
                        class="ani title jb_carousel_content">
                        {{img.configXml.content | CarouselContentFilter}}
                     </div>
                  </div>
            </div>
         </div>
      </div>
</div>



<div class="page">
      
      <div class="swiper-pagination"></div>
      
      <div class=" prev fa fa-angle-left " style="outline: none;"></div>
      <div class=" next fa fa-angle-right" style="outline: none;"></div>
      <div class="jb_realIndex" ng-cloak="">
         {{pageIndex+1}} / {{carousel.length}}
      </div>
</div>
</div>

JS
-
loginOrRegist.httpPostRequest(getAllAdvertUrl)
      .then(function ( response ) {
         $rootScope.carousel = [];
         if ( response.code === 1 ) {
            response.object.forEach(function ( item, idx ) {
                  item.imgPc = response.map.url + item.imgPc;
                  if ( item.type === 1 && item.linkType !== 3) {
                     item.configXml = carouselConfig[idx];
                     $rootScope.carousel.push(item);
                  }
                  else if(item.linkType === 3){
                     $rootScope.headerShowHide = true;
                     var global = true;
                     sessionStorage.setItem('global',global);
                     latestActivBtn.push(item);
                     sessionStorage.setItem('latestActivBtn',JSON.stringify(latestActivBtn))
                  }
            });

            if ( $rootScope.carousel.length > 6 ) {
                  $rootScope.carousel.length = 6;
            }

            var mySwiper = new Swiper('.swiper-container', { //重置轮播加载方法
                  loop : true,
                  direction: 'horizontal',
                  speed : 1000,
//                runCallbacksOnInit:true,
//                updateOnImagesReady:true,
                  pagination : {
                     el : '.swiper-pagination',
                     clickable : true
                  },
                  navigation : {
                     nextEl : '.next',
                     prevEl : '.prev'
                  },
                  slidesPerView : 1,
                  paginationClickable : true,
                  spaceBetween : 20,
//                loop : true,
//                loopAdditionalSlides:1,
                  autoplay : {
                     delay : 2000,
                     disableOnInteraction : false,
                     waitForTransition: false
                  },
                  keyboardControl : true,
                  observer : true,//修改swiper自己或子元素时，自动初始化swiper
                  observeParents : true,//修改swiper的父元素时，自动初始化swiper

               on : {
                     init : function () { //Swiper2.x的初始化是onFirstInit
                        swiperAnimateCache(this); //隐藏动画元素
                        setTimeout(function(){ //2s后开始运行动画（移动端总是没加载完图片就开始动画了
                              swiperAnimate(mySwiper); //初始化完成开始动画
                        },500)
                  },
                     slideChangeTransitionEnd : function () {
                        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                     },
                     autoplay : function () {
                        clearInterval(pageTime);
                        pageTime = setInterval(function () {
                              $(".page").css({
                                 animation : 'fadeIn 5s linear 0s infinite'
                              });
                        }, 0);
                     }
                  }
         },0);
            var timerIndex = setInterval(function () {
                  $scope.$apply(function () {
                     var pageIndex = $scope.pageIndex = mySwiper.realIndex;
                  });
            }, 800);
         }
         else {
            $modalService.modalConfirm(response.message, '现在登录', $state, 'login');
         }
      });

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)