如何减少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滑动框自动播放速度？

回答

相关问题