<ion-slides id="slider-topics" pager="true" [options]="{effect: 'flip'}" >
     
  <ion-slide *ngFor="let item of categories ">
    <ion-card  color="light" no-padding>
      <img src="{{item.img}}" style="width:100%; object-fit: cover;">

      <div class="text-container">
        <ion-card-subtitle></ion-card-subtitle>
        <ion-card-title style="margin:0; padding:0;">{{item.name}}</ion-card-title>

      <ion-card-content>
       {{item.desc}}
       
    
      </ion-card-content>
    </div>
      <ion-row class="button-row"  >
        <ion-col>      
      <ion-button  (click)="cardClick($event.currentTarget, item.categoryId, item.lessonCount)" color="secondary">
        <ion-icon name="heart-empty" size="large"> </ion-icon>
      </ion-button>
       


        </ion-col>
      </ion-row>
    </ion-card>
  </ion-slide>  

    

  
    </ion-slides>