Ion-scroll horizontal onside of ion-slides locked for swiping

Ionic Framework ionic-v3
1

Greetings.

I have a multi-page form with the usage of ion-slides

<ion-slides #mySlider>
    <ion-slide>
      <ion-scroll scrollX="true">
        <ion-row nowrap class="photoBlock">
          <div *ngFor="let img of base64Images; let i = index" class="scroll-item" >
            <ion-icon name="close-circle" class="icon-delete-img" color="light-grey" (click)="deletePicture(i)"></ion-icon>
            <img src="{{img}}">
          </div>
          <div class="scroll-item">
            <ion-icon name="close-circle" class="icon-delete-img" color="light-grey" (click)="deletePicture()"></ion-icon>
            <img src="http://via.placeholder.com/150x150">
          </div>
          <div class="scroll-item">
            <ion-icon name="close-circle" class="icon-delete-img" color="light-grey" (click)="deletePicture()"></ion-icon>
            <img src="http://via.placeholder.com/150x150">
          </div>
          <div class="scroll-item">
            <ion-icon name="close-circle" class="icon-delete-img" color="light-grey" (click)="deletePicture()"></ion-icon>
            <img src="http://via.placeholder.com/150x150">
          </div>
          <div class="camera-item" [ngClass]="(base64Images.length > 0)? 'scroll-item': 'scroll-item margin-0'">
            <ion-icon name="camera" class="camera-icon icon-lg" (click)="openCamActionSheet()"></ion-icon>
          </div>
        </ion-row>
      </ion-scroll>
      <ion-list>

.... irrelevant html further

i want to slider to be locked for slide changes by swiping, which is done by solution suggested in some other topic here.

  ionViewDidLoad() {
    this.sellSlider.lockSwipes(true);
  }
  //workaround to disable gesture swipe
  nextSlide() {
    this.sellSlider.lockSwipes(false);
    this.sellSlider.slideNext();
    this.sellSlider.lockSwipes(true);
  }

  prevSlide() {
    this.sellSlider.lockSwipes(false);
    this.sellSlider.slidePrev();
    this.sellSlider.lockSwipes(true);
  }

however at the same time this is disabled the ability to scroll ion-scroll horizontally by swipe gesture.

How do i solve this?

8

Not sure this can help in your case, but I am using this CSS to unable slides to be swipeable.

  ion-slides .swiper-wrapper {
    transform: none !important;
  }
9

not particularly a solution here - slides must be disabled for swipe, but the horizontal ion-scroll inside of them - enabled

10

Have you tried to change scrollX=“true” to scrollY=“true” ?

11

i need a horizontal scrolling there.

12

Ok. I always get confused with the coordinate axes.

But why do you use a slide when you don’t want to slide?

13

i don’t want to slide by swapping.

for paging within one page.

14

Ok. I woud use cards and show and hide the cards with ngif depending on a variable. Perhape called activePage.

So when activepage==1 only show card one and so on.

15
  1. it doesn’t have to be ion-card as page with your approach. actually it will be a bad idea to use ion-cards as top-level element.
  2. it’s very dirty approach. normally as i understood, slider is used for it in ionic.

P.S. jacktoolsnet, please leave me. i told you in PM already that your skills aren’t enough for my cases.

16

I am having the exact same problem. Any answers?

17

I couldn’t make it work with ion-scroll inside a locked slide. I solved my issue with putting ion-slides into my locked slide. So, ion-slides inside ion-slides worked for me.