# Flexslider in ionic-content with touch

**URL:** <https://forum.ionicframework.com/t/flexslider-in-ionic-content-with-touch/4062>\
**Category:** uncategorized\
**Created:** [May 11, 2014, 5:07am UTC](https://forum.ionicframework.com/t/flexslider-in-ionic-content-with-touch/4062 "2014-05-11T05:07:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![yalamber](https://avatars.discourse-cdn.com/v4/letter/y/ecb155/32.png) [@yalamber](https://forum.ionicframework.com/u/yalamber)\
**Post date:** [May 11, 2014, 5:07am UTC](https://forum.ionicframework.com/t/flexslider-in-ionic-content-with-touch/4062/1 "2014-05-11T05:07:29Z")

</div>

I am trying to use this slider [https://github.com/EnthusiasticCode/angular-flexslider](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

---

<div class="post-metadata">

**Author:** ![yalamber](https://avatars.discourse-cdn.com/v4/letter/y/ecb155/32.png) [@yalamber](https://forum.ionicframework.com/u/yalamber)\
**Post date:** [May 16, 2014, 3:52pm UTC](https://forum.ionicframework.com/t/flexslider-in-ionic-content-with-touch/4062/2 "2014-05-16T15:52:06Z")

</div>

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. 😄

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [May 16, 2014, 3:55pm UTC](https://forum.ionicframework.com/t/flexslider-in-ionic-content-with-touch/4062/3 "2014-05-16T15:55:23Z")

</div>

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

[http://ionicframework.com/docs/api/directive/ionSlideBox/](http://ionicframework.com/docs/api/directive/ionSlideBox/)

---

<div class="post-metadata">

**Author:** ![yalamber](https://avatars.discourse-cdn.com/v4/letter/y/ecb155/32.png) [@yalamber](https://forum.ionicframework.com/u/yalamber)\
**Post date:** [May 16, 2014, 4:02pm UTC](https://forum.ionicframework.com/t/flexslider-in-ionic-content-with-touch/4062/4 "2014-05-16T16:02:09Z")

</div>

> [@mhartington](#):
>
> [ion-slide-box - Directive in module ionic - Ionic Framework](http://ionicframework.com/docs/api/directive/ionSlideBox/)

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [May 16, 2014, 4:16pm UTC](https://forum.ionicframework.com/t/flexslider-in-ionic-content-with-touch/4062/5 "2014-05-16T16:16:20Z")

</div>

Yup

```
.slider{
  height: 200px;
}
```

---

<div class="post-metadata">

**Author:** ![LouisR](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@LouisR](https://forum.ionicframework.com/u/LouisR)\
**Post date:** [November 29, 2014, 5:05pm UTC](https://forum.ionicframework.com/t/flexslider-in-ionic-content-with-touch/4062/6 "2014-11-29T17:05:46Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![jfoscue](https://avatars.discourse-cdn.com/v4/letter/j/f19dbf/32.png) [@jfoscue](https://forum.ionicframework.com/u/jfoscue)\
**Post date:** [January 28, 2015, 4:01pm UTC](https://forum.ionicframework.com/t/flexslider-in-ionic-content-with-touch/4062/7 "2015-01-28T16:01:42Z")

</div>

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