javascriptionic-frameworkionic4ion-slides

ion-slider fixed on bottom of ion-content

I have ion-slider fixed on top of ion-content I tried to make it fixed on the bottom and always continue sliding, on the first load of the page the slider is sliding automatically but if I open another page and returns to the same page the slider stops.

<ion-header>
  <ion-toolbar class="new-background-color">
    <ion-title>    
      <ion-text color="light">
        <h4>Main Page</h4>
      </ion-text>   

  </ion-title>
  <ion-buttons slot="start">
    <ion-menu-button autoHide="false" style="
    color: white;
"></ion-menu-button>
  </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content style="justify-content: center;">
  <ion-fab style="margin: 0 auto !important;"  vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button color="primary" (click)="postad('0')">
        <ion-icon name="add"></ion-icon>
        </ion-fab-button>
    </ion-fab>

 


      <ion-slides  vertical="bottom" slot="fixed" style="height: 100px;" #ionSlides2 [options]="slideOptions" (ionSlidesDidLoad)="slidesDidLoad(ionSlides2)">
        <ion-slide *ngFor="let ads of adsArray;let i=index" (click)="gotoAd(i)">
          <ion-row>
            <ion-col siz="12">
              <ion-card class="col">
                <img src="https://qateef-ads.co/uploads/{{ ads.document }}">
              </ion-card>
            </ion-col>
          </ion-row>
        </ion-slide>
      </ion-slides> 



    <ion-grid class="animate-in-primary">

    <ion-row style="padding-top: 15px; padding-bottom: 25px;" *ngFor="let item of dataArray;let i=index" (click)="gotoNext(i)">
      
      <ion-card style="width: 90%;display: block;text-align: center;">
        
        <img class="list-grow-animation" style="object-fit: fill;object-position: -20% 0;width: 335px;height: 230px;" src="https://mysite.co/uploads/{{ item.document }}" >
        
        <ion-card-header>
          <ion-card-subtitle>{{ item.city }}</ion-card-subtitle>
          <ion-card-title style="color: #3055a6;">{{ item.title }}</ion-card-title>
        </ion-card-header>

        <ion-card-content>
          {{ item.message }}
        </ion-card-content>

        <ion-card-subtitle style="text-align: center;">{{ checktime(item.time) }}</ion-card-subtitle>

      </ion-card> 

      </ion-row>

 
    </ion-grid>



  </ion-content>

and in the typescript file I make it auto sliding on the slidesDidLoad

slidesDidLoad(slides: IonSlides) {
  slides.startAutoplay();
}

slideOptions = {
  initialSlide: 1,
  speed: 400,
};

Solution

  • To have the slider fixed at the bottom add an ion-footer as shown in pseudo code below:

     <ion-content>
   some content
 </ion-content>
 <ion-footer>
   some slider stuff
 </ion-footer>

    I also probably would not use inline style to have it be 100% height. In fact, don't use inline styles at all. This is what CSS is for.

    There is not enough information in your question to answer the problem of why slider does not work on second view.

    Are there any errors from the console?

    What is loading ionSlides2?

    Add more info to what the problem is and I'll work on updating my answer.

    It is more than likely a lifecycle issue as discussed here. https://github.com/ionic-team/ionic/issues/16935

    I would probably create a class variable for slides and then trigger autoplay from ionViewWillEnter