Wie reduziere ich die ionic1 Slide-Box Autoplay-Geschwindigkeit?

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> 

Ich bin mit ionischer Framework Version 1 .Wenn i verwenden, um die Ionen Dia-Box Auto-Play = "true", dass die automatischen Geschwindigkeit wenig Geschwindigkeit. 1.Wie reduziere ich diese Geschwindigkeit? 2.Möglicherweise den nächsten Schieberegler zu reduzieren Timing? 3. Wie reduziere ich diese Geschwindigkeit?

Answer 1

würde ich nicht vorschlagen ion-slide-box verwenden, da es veraltet ist und entfernt werden.

Verworfene API

wird in der nächsten Ionic Release zugunsten der neuen Ionen Dias Komponente entfernt werden. Nicht auf das interne Verhalten dieses Widget abhängen - source.

Statt die neue ion-slides auf Swiper API basiert. Diese API bietet viel mehr Flexibilität mit Folien (siehe Abschnitt "Swiper-Parameter" im Link). Zum Beispiel können Sie die Geschwindigkeit eines Übergangs und sogar die automatische Wiedergabegeschwindigkeit bestimmter Folien reduzieren.

Auto Play

Verzögerung zwischen den Übergängen (in ms). Wenn dieser Parameter nicht angegeben ist, wird die automatische Wiedergabe

deaktiviert

Wenn Sie unterschiedliche Verzögerung für bestimmte Folien angeben müssen Sie es durch Daten-swiper-automatische Wiedergabe mit (in ms) Attribut auf Folie kann:

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

Grund Beispiel mit neuen Folien:

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> 

-Controller

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

Voll Codepen Beispielhere.

Answer 2

Sie benötigen slide-interval Eigenschaften von Ionen Dia-Box zu verwenden.

Zum Beispiel:

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

Fore mehr Eigenschaften lesen here.

Hoffnungen das wird dir helfen !!