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.当我使用离子滑动盒时自动播放=＆＃34; true＆＃34;那个自动速度有点速度。 1.我如何降低速度？ 2.可以减少下一个滑块定时吗？ 3.如何降低速度？

Answer 1

我不建议使用ion-slide-box，因为它已被弃用并将被删除。

弃用的API

将在下一个Ionic版本中删除，以支持新版本   离子滑动组件。不要依赖于此的内部行为   小部件 - source.

而是使用基于ion-slides的新Swiper API。此API为幻灯片提供了更大的灵活性（请参阅链接中的Swiper Parameters部分）。例如，您可以降低转换的速度，甚至可以自动播放某些幻灯片的速度。

自动播放

转换之间的延迟（以毫秒为单位）。如果未指定此参数，将禁用自动播放

如果您需要为特定幻灯片指定不同的延迟，您可以这样做   它通过在幻灯片上使用data-swiper-autoplay（以ms为单位）属性：

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

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

<强> HTML

<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;
});

完整的Codepen示例 here.

Answer 2

您需要使用ion-slide-box的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>

更多属性阅读here。

希望这会对你有所帮助!!

如何减少ionic1 Slide box自动播放速度？

2 个答案: