ksachdeva / angular-swiper

Angular directive for nolimits4web/Swiper
Apache License 2.0
197 stars 94 forks source link

Thumbs Gallery With Two-way Control #66

Open barbossa opened 7 years ago

barbossa commented 7 years ago

Hi guys, Small question, does this directive support Thumbs Gallery from demo http://idangero.us/swiper/demos/?

najafi-saeed commented 6 years ago

yes. you can use this codes:

<ks-swiper-container swiper="sliderTop" on-ready="onReadyFuncTop(swiper)"   slides-per-view="1">
        <ks-swiper-slide class="swiper-slide" ng-repeat="s in [1,2,3,4,5,6,7,8,9,10,11,12,13,14]">
               <img ng-src="http://api.randomuser.me/portraits/thumb/men/{{s}}.jpg">
        </ks-swiper-slide>
</ks-swiper-container>

<ks-swiper-container override-parameters="{'slideToClickedSlide':'true','centeredSlides':'true'}"
             swiper="sliderBottom" on-ready="onReadyFuncBottom(swiper,sliderTop)"  slides-per-view="5">
        <ks-swiper-slide class="swiper-slide" ng-repeat="s in [1,2,3,4,5,6,7,8,9,10,11,12,13,14]">
               <img ng-src="http://api.randomuser.me/portraits/thumb/men/{{s}}.jpg">
        </ks-swiper-slide>
</ks-swiper-container>

and js in your controller:

$scope.sliderTop = {};
$scope.sliderBottom = {};

$scope.onReadyFuncTop = function(swiper_param) {
      // nothing
};
$scope.onReadyFuncBottom = function(swiper1param , swiper2param) {
    swiper1param.controller.control = swiper2param;
    swiper2param.controller.control = swiper1param;
};