How to put an icon over images which are within a slider

Ionic Framework ionic-v3
1

Hello guys, I have the following code:

<swiper>
  <div *ngFor="let video of lista.videos" style="padding-top: 0px;">
          <button class="boton-slider" (click)="this.navCtrl.push('VideoPlayerPage', {video: video})">
              <ion-thumbnail>
                  <img [src]="video.miniatura">
              </ion-thumbnail>
              <p class="titulo-video">{{video.titulo}}</p>
           </button>
   </div>
 </swiper>

Which gives me the following:

image
image.jpg420×780 90.5 KB

I need to put an icon in the place that there is a circle. It must be taken into account that those images slide horizontally and also the screen can scroll vertically.

How could I achieve this?

Also the swipper component I am using is from the following library.

Thanks in advance!

2

you can do that by give position css to button


<div *ngFor="let video of lista.videos" style="padding-top: 0px;">
          <button class="boton-slider" (click)="this.navCtrl.push('VideoPlayerPage', {video: video})">
              <ion-thumbnail>
                  <img [src]="video.miniatura">
              </ion-thumbnail>
              <p class="titulo-video">{{video.titulo}}</p>
              <div class="btnMore">...</div>
           </button>
   </div>

and class

.btnMore{
padding:5px;
position:absolute;
top:0;
right:0;
}
1 Like
4

Thank you very much, it worked perfectly!

5

Could you tell me how to do it a list like this?

<button *ngFor="let video of lista.videos" ion-item detail-none (click)="this.navCtrl.push('VideoPlayerPage', {video: video})">
     <img class="thumbnail-buscar" ion-item item-start [src]="video.miniatura">
     <p class="titulo-video">{{video.titulo}}</p>
</button>

Doesn’t matter what I do with the same code, the text of the list is always dissapearing.

6

probably default css of ion-item affect your button
or don’t use <p> tag inside button because it also have default padding css issue.
direct write {{video.titulo}} or inside div tag

1 Like
7

I’ve managed to make it work with this:

HTML

<button *ngFor="let video of lista.videos" ion-item detail-none (click)="this.navCtrl.push('VideoPlayerPage', {video: video})">
     <img class="thumbnail-buscar" ion-item item-start [src]="video.miniatura">
     <p class="titulo-video">{{video.titulo}}</p>
     <div class="video-visto-busqueda">
         <ion-chip color="primary">
            <i class="icon-sm icon-ophthalmology" aria-hidden="true"></i>
                <span class="label-chip">Visto</span>
         </ion-chip>
      </div>
 </button>

CSS

.video-visto-busqueda {
        padding: 0.1rem;
        position: absolute;
        top: 0.5rem;
        right: 28rem;
        color: map-get($colors, primary);
    }

    ion-chip {
        height: 2rem !important;
        padding-right: 1rem;

        i {
            font-size: 2rem !important;
            margin-right: -0.3rem !important;
            padding-left: 1rem !important;
            padding-top: 0.2rem !important;
            padding-right: 1rem !important;
            margin-top: -0.3rem !important;
        }
        
    
        .label-chip {
            font-size: 1rem !important;
            margin-top: -0.7rem !important;
            padding-top: 0.15rem !important;
        }
    }

But when I rotate the screen it looks bad:

Vertical

image

Horizontal

image

1 Like
8

if you want to manage both h/v ui then button is not good choice for it.
you can use grid,row,col like this:

<ion-row *ngFor="let video of lista.videos">
<ion-col col-4>
 <img class="thumbnail-buscar" ion-item item-start [src]="video.miniatura">
<div class="video-visto-busqueda">
         <ion-chip color="primary">
            <i class="icon-sm icon-ophthalmology" aria-hidden="true"></i>
                <span class="label-chip">Visto</span>
         </ion-chip>
      </div>
 <ion-col>
<ion-col col-8>
{{video.titulo}} 
<ion-col>
</ion-row>
9

With that the images look much smaller:

image

10

then you can set height,width of image using css
so every time it will display same size image