如何減少ionic1滑動框自動播放速度？

<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>

我使用離子Framework版本1。當我使用離子滑框自動播放=「真實」是汽車速度有點速度。 1.我如何降低速度？ 2.可以減少下一個滑塊的時間嗎？ 3.如何降低速度？如何減少ionic1滑動框自動播放速度？

來源

2016-12-26 Periyasamy

http://ionicframework.com/docs/api/directive/ionSlideBox/檢查文檔，並嘗試使用slide-interval屬性，因爲他們提到 –

感謝您的重播@SaEChowdary。這是完美的工作。但我問的問題是如何減少自動播放速度？ – Periyasamy

add slide-interval =「10000」並檢查一次「 –

我不會建議使用ion-slide-box，因爲它已被棄用並將被刪除。

已過時API

將在接下來的離子釋放贊成新離子滑動部件的被移除。不要依賴此部件的內部行爲 - source.

而是使用基於Swiper API新ion-slides。該API爲幻燈片提供了更多靈活性（請參閱鏈接中的Swiper參數部分）。例如，您可以降低轉換的速度，甚至可以降低某些幻燈片的自動播放速度。

自動播放

延遲之間的轉換（毫秒）。如果沒有指定這個參數，自動播放將被禁用

如果需要指定特定的幻燈片不同的延遲，你可以通過幻燈片使用數據的刷卡自動播放（毫秒）屬性做它：

<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.

來源

2016-12-26 06:52:19 Sam5487

需要使用離子滑動框的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。

希望這會幫助你！

來源

2016-12-26 07:03:45

如何減少ionic1滑動框自動播放速度？

回答

相關問題