slides lista item desplegable cards angular ionic2 swiper

angular - lista - Agregar barra de desplazamiento horizontal a los toboganes de iones de Ionic2



ionic slides (1)

Estoy usando Ionic2''s ion-slides que funciona bien para mí.

<ion-slides [options]="extraOptions"> <ion-slide *ngFor="let slide of slides"> <img src="{{slide.image}}" /> </ion-slide> </ion-slides>

Me gustaría agregar una barra de desplazamiento horizontal como se muestra aquí en la API de Swiper http://idangero.us/swiper/api/#.V6Lcx8twbqA (13º ejemplo) ya que los documentos mencionan que Swiper es lo que se usa para ion-slides . El código fuente para ese ejemplo tiene <div class="swiper-scrollbar"></div> después de la <div class="swiper-wrapper"> .

El problema es que Ionic genera el HTML, entonces, ¿cómo podría agregar la característica de barra de desplazamiento?

Para agregar viñetas de paginación al deslizador, solo tengo que agregar la directiva de atributo de pager en la etiqueta de ion-slides . ¿Hay algo similar para la barra de barra de desplazamiento horizontal?


Esto no se puede hacer a través del componente de deslizamiento de iones de Ionic. Vea la respuesta de uno de los autores aquí: https://forum.ionicframework.com/t/how-to-add-horizontal-scrollbar-to-slides/59450/3?u=brightpixels

Not at the moment. We''ve tried to keep the Slides API much simpler than the original Swiper API. But we plan on revisiting this post 2.0 final

Lo resolví usando directamente la biblioteca swiper y creando mi propio componente.

  • Instalar el módulo a través de npm: npm install swiper
  • En la parte superior del archivo de componente declare var require
  • Entonces var swiper = require(''swiper'')