How to implement horizontal slider inside vertical slider?

Ionic Framework ionic-v3
1

I want to implement horizontal slider inside vertical slider

For e.g.
Suppose one product has 3 images so this will slide vertically and this product has 2 variant (2 images) so it will slide horizontally inside all vertical slide

Please help me

2

Vertical slider = scrolling?

3

Hello, @Sujan12

Didn’t get it

may you ellaborate?

4

What do you mean by “vertical slider”? Just scrolling over some pictures?

5

Yes,you are right

When i scroll image will be change
Just scrolling over some pictures

for e.g. suppose 3 images (v1,v2,v3)are there when i scroll down to second image(v2) at that position when i scroll horizontally then (h1,h2)image will be shown

6

Won’t your problem get solved using css’ property overflow?
I mean user overflow-x for horizontal scroll and overflow-y for vertical scroll?

7

Hello, @umerf6455

I want slider effect.
When i scroll vertically at that time pagination should show vertically and when i slide horizontally at that time pagination should show horizontally

8

Hi @cooldp007. Sorry for late response. You can specify direction in Ionic’s default slider. I am attaching a link to the Docs for that specified part. Have a look at it’s Input Properties part. That’d help you I think.

https://ionicframework.com/docs/api/components/slides/Slides/

9

Hello, @umerf6455

It’s not help me.See below my code:-

 <ion-slides direction="vertical" style="height:300px;width:auto;">
      <ion-slide>
        <ion-slides direction="horizontal" style="height:300px;width:auto;">
          <ion-slide>
            <img src="assets/icon/image_1.jpg" style="height: 300px;width:auto;">
          </ion-slide>
          <ion-slide>
            <img src="assets/icon/image_2.jpg" style="height: 300px;width:auto;">
          </ion-slide>
          <ion-slide>
            <img src="assets/icon/image_3.jpg" style="height: 300px;width:auto;">
          </ion-slide>
        </ion-slides>
      </ion-slide>
      <ion-slide>
        <ion-slides direction="horizontal" style="height:300px;width:auto;">
          <ion-slide>
            <img src="assets/icon/image_4.jpg" style="height: 300px;width:auto;">
          </ion-slide>
          <ion-slide>
            <img src="assets/icon/image_5.jpg" style="height: 300px;width:auto;">
          </ion-slide>
          <ion-slide>
            <img src="assets/icon/image_6.jpg" style="height: 300px;width:auto;">
          </ion-slide>
        </ion-slides>
      </ion-slide>
      <ion-slide>
        <ion-slides direction="horizontal" style="height:300px;width:auto;">
          <ion-slide>
            <img src="assets/icon/image_7.jpg" style="height: 300px;width:auto;">
          </ion-slide>
          <ion-slide>
            <img src="assets/icon/image_8.jpg" style="height: 300px;width:auto;">
          </ion-slide>
          <ion-slide>
            <img src="assets/icon/image_9.jpg" style="height: 300px;width:auto;">
          </ion-slide>
        </ion-slides>
      </ion-slide>
 </ion-slides>