angular-swiper icon indicating copy to clipboard operation
angular-swiper copied to clipboard

ngModel on angular-swiper directive

Open sergiocard opened this issue 9 years ago • 1 comments

Hi all, I think it would be very useful to implement an ngModel attribute on the directive. Something like:

<ks-swiper-container ng-model="selectedSlide"......

So you can have in the "selectedSlide" the object that swiper is currently shown into their activeIndex. Swiper API offers onSlideChangeEnd(swiper) callback. It's possible to use this callback to retrieve current slide object with something like mySwiper.slides[mySwiper.activeIndex] and set this object into ngModel. I actually would need this feature... thanks a lot

sergiocard avatar Nov 26 '15 09:11 sergiocard

It would be great. For sure. But in the mean time you could use the native Swiper API from which is derived the angularjs-swiper lib. you still have access to the parent object Just did it recently and it works great when you watch the snapIndex property.

* In your view :*

<ks-swiper-container override-parameters="{'effect':'cube', cube: { slideShadows: false, shadow: false }}" loop="false" show-nav-buttons="true" swiper="swiper" on-ready="onReadySwiper(swiper)">

</ks-swiper-container>

Controller :

    $scope.onReadySwiper = function( swiper )
    {
                swiper.initObservers();
                // Emitter API add callback
                swiper.on('slideChangeEnd', function (e) 
                                {
                      console.log('slide change end');
                      console.log(e.snapIndex);
                });
    };

give me your feedback ..

Infact you don't need to give me your feedback. If you check the content of the demos section you will find an pretty nice example on how the author has access to the wrapped swiper object. https://github.com/ksachdeva/angular-swiper/blob/master/demos/index.html

bamboolix avatar Sep 11 '16 21:09 bamboolix