如何降低ionic1幻灯片盒的自动播放速度？

Question

   <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true"  does-continue="true">
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>

我使用的离子框架版本1 .When，我使用离子幻灯片盒自动play=“真”，即自动速度一点点的速度。1.如何降低速度?2.是否有可能降低下一次滑块的计时?3.如何降低速度？

Answer 1

我不建议使用ion-slide-box，因为它是不推荐的，并且将被删除。

不推荐的API 将被删除在下一个离子释放有利于新的离子幻灯片组件。不要依赖于这个小部件- 来源。的内部行为。

相反，使用基于ion-slides的新刷卡API。这个API为幻灯片提供了更多的灵活性(参见链接中的Swiper参数部分)。例如，您可以降低过渡的速度，甚至某些幻灯片的自动播放速度。

自动播放 转换之间的延迟(以ms为单位)。如果未指定此参数，则将禁用自动播放。 如果您需要为特定的幻灯片指定不同的延迟，可以使用幻灯片上的数据刷自动播放( ms)属性来实现：

<div class="swiper-slide" data-swiper-autoplay="2000">

使用新幻灯片的基本示例：

<ion-content scroll="false">
  <ion-slides  options="options" slider="data.slider">
    <ion-slide-page>
      <div class="box blue"><h1>BLUE</h1></div>
    </ion-slide-page>
    <ion-slide-page>
      <div class="box yellow"><h1>YELLOW</h1></div>
    </ion-slide-page>
    <ion-slide-page>
      <div class="box pink"><h1>PINK</h1></div>
    </ion-slide-page>
  </ion-slides>
</ion-content>

控制器

$scope.options = {
  loop: false,
  effect: 'fade',
  speed: 500,
}

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
  // data.slider is the instance of Swiper
  $scope.slider = data.slider;
});

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
  console.log('Slide change is beginning');
});

$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
  // note: the indexes are 0-based
  $scope.activeIndex = data.slider.activeIndex;
  $scope.previousIndex = data.slider.previousIndex;
});

完整代码示例 这里。

Answer 2

你需要使用离子幻灯片盒的slide-interval属性.

例如：

       <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true"  does-continue="true" slide-interval="1000">
          <ion-slide>
            <div class="box blue"><h1>BLUE</h1></div>
          </ion-slide>
          <ion-slide>
            <div class="box yellow"><h1>YELLOW</h1></div>
          </ion-slide>
          <ion-slide>
            <div class="box pink"><h1>PINK</h1></div>
          </ion-slide>
        </ion-slide-box>

前面更多的属性读这里。

希望这能帮到你!！