css 图像查看器与漂亮的滑块

Posted 2021-05-13

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  images = [
    '1.jpg',
    '2.jpg',
    '3.jpg'
  ];
  constructor(public navCtrl: NavController) {}
}

<ion-content>
  <ion-slides class="image-slider" loop="true" slidesPerView="2">
    <ion-slide *ngFor="let img of images">
      <img src="assets/img/{{img}}" class="thumb-img" imageViewer>
    </ion-slide>
  </ion-slides>
</ion-content>

page-home {
    ion-slide.swiper-slide{
        left: 25%;
    }
    .thumb-img {
        padding: 10px;
    }
}