swiper.js - Angular 17 swiper element zoom - Stack Overflow

admin管理员组

文章数量:1122846

How can I implement zoom functionality for a swiper element in Angular 17? I followed this approach to use swiper elements in my Angular project. I tried adding the zoom property in the same way as pagination. The pagination property works, but the zoom property has no effect: <swiper-container [pagination]="{ clickable: true }" [zoom]="true">.

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <p>Swipe to change slides</p>
        <swiper-container>
          <swiper-slide>Slide 1</swiper-slide>
          <swiper-slide>Slide 2</swiper-slide>
          <swiper-slide>Slide 3</swiper-slide>
          <swiper-slide>Slide 4</swiper-slide>
        </swiper-container>`,
  styles: [
    `swiper-slide {
      height: 400px
    }
    swiper-slide:nth-of-type(1) {
      background-color: red;
    }
    swiper-slide:nth-of-type(2) {
      background-color: green;
    }
    swiper-slide:nth-of-type(3) {
      background-color: blue;
      color: white;
    }
    swiper-slide:nth-of-type(4) {
      background-color: yellow;
    }`,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {}

StackBlitz

本文标签： swiperjsAngular 17 swiper element zoomStack Overflow