swiper实现自动轮播的问题,不能跳转到第一个slide的解决办法

ionic+swiper实现自动轮播在实现自动轮播的时候,请求回来的图片数据不能正常轮播,在每次轮播的时候总是会跳过第一张从第二张开始,针对该问题可以在控制器中注入$timeout,将实例化swiper对象放入$timeout定时器中解决。

html

<div id="index-banner" ng-if="ads">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" ng-repeat="ad in ads">
              ![]({{ad.advertisingPicture}})
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>

控制器中代码:

$scope.indexBanner = function () {
      $timeout(function() {
        var swiper = new Swiper('#index-banner .swiper-container', {
          pagination: '#index-banner .swiper-pagination',
          slidesPerView: 1,
          paginationClickable: true,
          spaceBetween: 0,
          initialSlide: 0,
          loop: true,
          observer: true,//修改swiper自己或子元素时,自动初始化swiper
          autoplay: $scope.playSpeed,
          loopAdditionalSlides: 2,
          autoplayDisableOnInteraction: false,
        });
      })
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容