¿como hacer un banner, como el de instagram donde cololocan las historias?

Ionic Native
1

image
image.jpg1024×576 109 KB

2

Hola! puedes intentar con ZUCK.js

entrega la funcionalidad completa de las historias

Saludos!

1 Like
3

muchas gracias Bro, lo revisare
…

4

Saludos bro, lo estoy usando en Ionic 3, pero me dice Invalid view to insert, cuando cierro el moal de las historias

5

@ freddycastillo @ YilmarGV

Yo uso el Slides

bandicam2019-08-2611-53-48-023

Ts
El valor 10 puedes jugar con el para mostrar mas item o menos item a cual se atu gusto.

slideOpts = {
      slidesPerView: 10,
      freeMode: true,
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      }
    }

Html

<ion-slides [options]="slideOpts">
  <ion-slide *ngFor="let grupo of grupos">
    <span>
      <img [src]="grupo.ur_imagen" alt="">
    </span>
  </ion-slide>
</ion-slides>

Css… Puedes jugar con el css para darle un mejor estilo

span{
  padding-left: 2px!important;
  padding-right: 2px!important;
  padding-top: 2px!important;
  padding-bottom: 2px!important;
  width: 85px!important;
  height: 70px!important;

}
ion-slide:hover{
  background: rgba(205, 9, 9, 0.43);
  cursor: pointer;

}
span img{
  width: 55px;
  height: 55px;
}


ion-slide {
  width: 90px!important;
  height: 85px!important;
  background-color:  #FFF;
  float: left;
  margin-left: 1.5px!important;
  margin-right: 1.5px!important;
  border-radius: 50px!important;
}
ion-slides{
  background-color:  rgba(194, 193, 194, 0.52);
}

En mi caso por el diseño son cuadrados
Captura

Espero te sirva…

2 Likes