swiper

package-lock.json

@@ -25,6 +25,7 @@
         "ionicons": "^7.0.0",
         "parse": "^5.2.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.4",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -15561,6 +15562,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.4.tgz",
+      "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/symbol-observable/-/symbol-observable-4.0.0.tgz",

package.json

@@ -30,6 +30,7 @@
     "ionicons": "^7.0.0",
     "parse": "^5.2.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

src/app/tab1/tab1.page.html

@@ -401,6 +401,91 @@
   <!-- 设计我家页 -->
   <div *ngIf="selectedSegment === 'home'">
     <!-- 设计我家内容 -->
+    <!-- Swiper轮播图 手动创建 -->
+    <!-- Slider main container -->
+    <button (click)="slide1?.slideNext()">next</button>
+    <div #slide1Comp class="swiper">
+      <!-- Additional required wrapper其他必需的包装器 -->
+      <!-- 分页 -->
+      <div class="swiper-wrapper">
+        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-280px, 0px, 0px);">
+          <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="7" style="width: 110px; margin-right: 30px;">
+            Slide 8
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="8" style="width: 110px; margin-right: 30px;">
+            Slide 9
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="9" style="width: 110px; margin-right: 30px;">
+            Slide 10
+          </div>
+          <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 110px; margin-right: 30px;">
+            Slide 1
+          </div>
+          <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 110px; margin-right: 30px;">
+            Slide 2
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="2" style="width: 110px; margin-right: 30px;">
+            Slide 3
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="3" style="width: 110px; margin-right: 30px;">
+            Slide 4
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="4" style="width: 110px; margin-right: 30px;">
+            Slide 5
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="5" style="width: 110px; margin-right: 30px;">
+            Slide 6
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="6" style="width: 110px; margin-right: 30px;">
+            Slide 7
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="7" style="width: 110px; margin-right: 30px;">
+            Slide 8
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="8" style="width: 110px; margin-right: 30px;">
+            Slide 9
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="9" style="width: 110px; margin-right: 30px;">
+            Slide 10
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 110px; margin-right: 30px;">
+            Slide 1
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="1" style="width: 110px; margin-right: 30px;">
+            Slide 2
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" style="width: 110px; margin-right: 30px;">
+            Slide 3
+          </div>
+        </div>
+        <div class="swiper-pagination"></div>
+
+        <!-- If we need pagination分页按钮 -->
+        <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
+          <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span>
+          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
+          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span>
+          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 7"></span>
+          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 8"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 9"></span>
+          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 10"></span>
+        </div>
+        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
+        <div class="swiper-pagination">
+          <div class="swiper-wrapper">
+            <!-- Slides幻灯片 -->
+            <div class="swiper-slide">
+              <img src="assets\img\ChineseStyle.png">
+            </div>
+            <div class="swiper-slide">
+              <img src="assets\img\NorthernEuropeStyle.png">
+            </div>
+            <div class="swiper-slide">
+              <img src="assets\img\WoodStyle.png">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <img src="example3.jpg" alt="Example 9">
   </div>
 

src/app/tab1/tab1.page.scss

@@ -309,3 +309,20 @@ p {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.swiper {
+  width: 100%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.swiper-slide {
+  background-position: center;
+  background-size: cover;
+  width: 300px;
+  height: 300px;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+}

src/app/tab1/tab1.page.ts

@@ -1,16 +1,47 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+
+import Swiper from 'swiper';
+
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss']
 })
-export class Tab1Page {
+export class Tab1Page implements OnInit {
 
   selectedSegment: string = 'explore';
+  @ViewChild("slide1Comp") slide1Comp:ElementRef |undefined
 
   constructor() {}
 
+  ngOnInit() {
+    // 延迟500毫秒加载
+    setTimeout(() => {
+      this.initSwiper();
+    }, 500);
+  }
+  
+  // 初始化轮播图
+  slide1:Swiper|undefined
+  initSwiper(){
+  console.log(this.slide1Comp)
+    this.slide1 = new Swiper(this.slide1Comp?.nativeElement, {
+      loop:true,
+      autoplay:{
+        delay:500,
+      },
+      mousewheel: {
+        forceToAxis: true,
+      },
+      pagination:{
+        el:".swiper-pagination",
+        clickable:true
+      }
+    });
+  }
+
+
   segmentChanged(event: CustomEvent) {
     this.selectedSegment = event.detail.value;
   }

src/index.html

@@ -4,7 +4,8 @@
 <head>
   <meta charset="utf-8" />
   <title>Ionic App</title>
-
+  <!-- Swiper轮播图样式 -->
+  <link rel="stylesheet" href="assets/swiper/swiper.min.css">
   <base href="/" />
 
   <meta name="color-scheme" content="light dark" />