I just update ionic and am using the new ion-slides box. How do I get which current box I am at?
$ionicSlideBoxDelegate.currentIndex()
returns the index of the currently active slide.
Note that it is ‘zero-based’, so the index of your first slide is 0
.
more info can be found in the docs.
$ionicSlideBoxDelegate
is deprecated, since it was only used for controlling ion-slide-box
.
With ion-slides
it works a bit different. You need to use $scope.$watch
to get the slider object, then you have full access to its api (see here):
$scope.$watch("slider", function(slider){
if (slider){
// save it to a local variable, e.g.:
ctrl.slider = slider;
}
});
Then do whatever you want, in your case:
var newIndex = ctrl.slider.activeIndex
Does anyone have a Codepen with complete example of how $scope.$watch works in case of new ?
Because my value of slider is always undefined…
Thanks
Tried a watch on the slider. Didnt work. What worked for me is this.
$scope.swiperOptions = { /* Whatever options */ effect: 'slide', initialSlide: 0, /* Initialize a scope variable with the swiper */ onInit: function(swiper){ $scope.swiper = swiper; }, onSlideChangeEnd: function(swiper){ console.log('The active index is ' + swiper.activeIndex); } };
HTML
<ion-slides slider="swiper" options="swiperOptions"> <ion-slide-page><h1>TEST HEADER 1</h1></ion-slide-page> <ion-slide-page><h1>TEST HEADER 2</h1></ion-slide-page> <ion-slide-page><h1>TEST HEADER 3</h1></ion-slide-page> </ion-slides>
The Srijith version works well ! Thank you
Sweet, thanks for the onInit suggestion! I had tried the $scope.$watch method, and while I was able to get it to work, that method is very clunky and unintuitive.
worked for me as well, thank you!
Works for me, thanks Srijith
That worked for me, too.
I would like to know , though, where can I find the documentation for ion-slides so I can write more complicated things like this?
But how do we know how their docs relate to ionic? At what point do you know to do something different in ionic to their docs/api? As the ionic version for example is initialised differently.
I’m struggling to get even the basic one working, which is very strange.
For dynamic image sliding it is not working
so i dont understand:
initilaize slider:
$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
console.log('sliderInitialized');
// data.slider is the instance of Swiper
$scope.slider = data.slider;
});
when move one slide left or right etc.
$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
console.log('Slide change is beginning');
});
The picture sliding work fine, but nothing in console
@Srijith You Sir, are a lifesaver. Thanks for pointing us to the Swiper docs. Everything I needed, found.
Cool! Here’s a blog i wrote with this stuff
How can I implement a function (button ng-click) to switch to next slides?
Tried something like this, but did not work.
slideNext: function(swiper){
swiper.slideNext();
}
can you try swiper.slideTo(slideIndex)?
Didn’t work:
$scope.options = {
loop: false,
initialSlide: 0,
direction: 'horizontal',
effect: 'fade',
speed: 500,
paginationClickable: true,
onInit: function(swiper){
$scope.swiper = swiper;
},
onSlideChangeEnd: function(swiper){
console.log('active slide is '+swiper.activeIndex);
},
slideNext: function(swiper){
swiper.slideTo(2); //test slide to page 2
}
};
Also tried this:
$scope.slideNext = function(swiper){
swiper.slideTo(2);
}
Thanks for your help!