ion-slider fixed on bottom of ion-content

Question

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,
};

score 0 · Accepted Answer · 2020-07-05T21:03:26.603

0

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

edited Jul 05 '20 at 21:03

answered Jul 05 '20 at 20:23

I got it worked using the footer and it is always sliding now, but I have one issue which is the image inside the slider is not taking the full size of the slider? – Hadi Jul 06 '20 at 10:14
If you could post your full code or even a working stackblitz it would be helpful. Without seeing the actual code in question, have you tried adding auto to height and width for the image and its container? You could also try using the inspection tool for elements and play around with the css to figure out which class you need to add. – Jul 06 '20 at 13:32

ion-slider fixed on bottom of ion-content

1 Answers1