$ionicSlideBoxDelegate alternative in new ion-slides?

[BhavanPatel]

$ionicSlideBoxDelegate Delegate that controls the ionSlideBox directive. Methods called directly on the $ionicSlideBoxDelegate service will control all slide boxes. Use the $getByHandle method to control specific slide box instances.

But for my project I need vertical support so I used new ion-slides,ion-slide-page but there is confusion that how can I handle slides like as $ionicSlideBoxDelegate .

[mlynch]

We've changed our approach in recent releases and we now expose the underlying slider implementation that you can completely control. Here's an example: https://github.com/driftyco/ionic/blob/master/test/html/slides.html

And the full API: http://www.idangero.us/swiper/#.Vo_tj5MrIUE

More docs incoming. Thanks!

[bcameron]

Thank you, I was going crazy here. :-)

Could I ask you to explain to me why we need the 'data.slider' and why we cannot do it directly on the scope of the containing controller by saying 'slider' in the ion-slides tag? Why can the ionSlides directive not set this value on the parent scope at the root level? (This is what I tried first but it doesn't work...)

My angular is rusty, but I have been to 'school' on this one so a brief pointer would suffice... I've a feeling this is some 101 stuff that I have forgotten...

Thanks.

[souly1]

Needed a bit of digging to find this explanation, but eventually worked, thanks.

[alxvallejo]

Yeah, +1 on this. The documentation isn't explaining the use of slider="data.slider". I was wanting to use ng-repeat for each slide. Not sure how to access the index, etc of the slider or go to a specific slide.

[mtpultz]

Found this example, but it is nothing like the docs. I can see eventually that the slideDelegate gets instantiated then you're good to go based on this example, but I don't understand $ionicSlides.slideChangeEnd since the example I found seems to listen to slideChangeEnd event directly, and we access activeIndex through the delegate instead of through the event and data params. The example seems to work so is this the way it should be used since the docs don't seem to illustrate this kind of implementation.

@mlynch the URL you provided with an example throws a 404 now.

[nirus]

ion-slides lacks documentation. Role of $ionicSlideBoxDelegate is missing, but the document points it. Appreciate the effort by the team. Request to update this section of documentation with simple example, coz we the ionic fans are waiting for this.

[yurik94]

if anyone (like me) come here because of searching something like "ion-slides how to change page dynamically / next button" I've just found a solution not available in the docs (imho it should be directly in ion-slides page)

$scope.$on("$ionicSlides.sliderInitialized", function (event, data) {
    // data.slider is the instance of Swiper
    $scope.slider = data.slider;
});

$scope.nextPage = function () {
    $scope.slider.slideNext();
};

instead of using $ionicSlideBoxDelegate as it seems to not work properly.

[LockonZero]

In case someone was searching for it (like me), the link of the example @mlynch provided is now https://github.com/driftyco/ionic-v1/blob/master/test/html/slides.html

[nathan5x-zz]

@LockonZero @yurik94 @mlynch - On the same context any examples available for Ionic 2 (Typescript). I seem to have a hard time in detecting slider events (ionSlideDrag, ionSlideDidChange...).

Referring this page - http://ionicframework.com/docs/v2/api/components/slides/Slides

[nathan5x-zz]

Made it work by adding these callback event functions inside the slider options.

        onInit: (slides:any) => {
            this.fieldSlider = slides
            this.fieldSlider.slideTo(this.index, 200)             
        },
        onSlideChangeStart: (swiper) => {
            console.log("Slide Changed --->")
            console.log(swiper)
        }

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.