Flexslider in ionic-content with touch

1

I am trying to use this slider https://github.com/EnthusiasticCode/angular-flexslider in ionic-content. But seems like swipe is not working for slider, arrows navigation work well. Is it because of the scroll=“true” in the content? I need both scrolling of the content and swipe feature in slider. Can anyone please suggest me on best possible way to achieve this.
Thank you

2

So I made it work. I had to use $IonicGesture Service to make it work.
I used it as follows:
in view:

<flex-slider slide="img in images" touch="true" control-nav="false" prev-text="" next-text="" slideshow="false" start="slideStarted()">
  <li>
    <img ng-src="{{img}}" class="full-image">
  </li>
</flex-slider>

and in controller I added $ionicGesture and a scope function as below:

scope.slideStarted = function(){
  var flex_el = angular.element(document.querySelector('.flexslider'));
  var flex_next_el = angular.element(document.querySelector('.flex-next'));
  var flex_prev_el = angular.element(document.querySelector('.flex-prev'));
  //whien swiped left
  $ionicGesture.on('swipeleft', function(e){
    flex_next_el.trigger('click');
  }, flex_el);
  //when swiped right
  $ionicGesture.on('swiperight', function(e){
    flex_prev_el.trigger('click');
  }, flex_el);
}

Really like the flexibility ionic framework provides. :smile:

3

Just curious, why use an external slider? Ionic already comes with a pretty powerful one.

http://ionicframework.com/docs/api/directive/ionSlideBox/

4

hmm havenot tried that slider. Will give it a try this weekend. can we set specific height on this slider?

5

Yup

.slider{
  height: 200px;
}
6

Hi
With this slider it seems that the width of each slide is the width of the screen . Can we specify several slides within the screen width ?

7

Does ionSlideBox support showing multiple images at the same time? I need to show multiple thumbnails on the screen at the same time.