feat:swiper-slides

E-Cover-app/package-lock.json

@@ -25,6 +25,7 @@
         "fmode-ng": "^0.0.62",
         "ionicons": "^7.2.1",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.15",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -17441,6 +17442,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.15.tgz",
+      "integrity": "sha512-IzWeU34WwC7gbhjKsjkImTuCRf+lRbO6cnxMGs88iVNKDwV+xQpBCJxZ4bNH6gSrIbbyVJ1kuGzo3JTtz//CBw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "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",

E-Cover-app/package.json

@@ -30,6 +30,7 @@
     "fmode-ng": "^0.0.62",
     "ionicons": "^7.2.1",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.15",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

E-Cover-app/src/app/tab1/tab1.page.html

@@ -1,57 +1,62 @@
 <div id="banner">
-  <div id="header">
-      <div id="header-left">
-          <ion-icon name="location-outline" size="large" aria-hidden="true"></ion-icon>
-          位置信息
-      </div>
+    <swiper-container autoplay-delay="5000" loop="true">
+        <swiper-slide><ion-img
+                src=""
+                class="banner-image" style="display: block;"/></swiper-slide>
+        <swiper-slide><ion-img
+                src="/assets/tab1-style-img/banner1.png"
+                class="banner-image" style="display: block;"/></swiper-slide>
+    </swiper-container>
 
-      <div id="header-right">
-          <ion-icon name="notifications-outline" size="large" aria-label="Favorite"></ion-icon>
-      </div>
-  </div>
+    <div id="header">
+        <div id="header-left">
+            <ion-icon name="location-outline" size="large" aria-hidden="true"></ion-icon>
+            位置信息
+        </div>
 
-  <div style="background:none;">
-      <ion-card>
-          <ion-button fill="clear" (click)="goGenerateOption()">
-              <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png"
-                  alt="button tab">
-          </ion-button>
-          <p>
-              测试
-          </p>
-      </ion-card>
+        <div id="header-right">
+            <ion-icon name="notifications-outline" size="large" aria-label="Favorite"></ion-icon>
+        </div>
+    </div>
 
-      <ion-card>
-          <ion-button fill="clear">
-              <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png"
-                  alt="button tab">
-          </ion-button>
-          <p>
-              未设置
-          </p>
-      </ion-card>
+    <div style="background:none;">
+        <ion-card>
+            <ion-button fill="clear" (click)="goGenerateOption()">
+                <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png" alt="button tab">
+            </ion-button>
+            <p>
+                测试
+            </p>
+        </ion-card>
 
-      <ion-card>
-          <ion-button fill="clear">
-              <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png"
-                  alt="button tab">
-          </ion-button>
-          <p>
-              未设置
-          </p>
-      </ion-card>
+        <ion-card>
+            <ion-button fill="clear">
+                <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png" alt="button tab">
+            </ion-button>
+            <p>
+                未设置
+            </p>
+        </ion-card>
 
-      <ion-card>
-          <ion-button fill="clear">
-              <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png"
-                  alt="button tab">
-          </ion-button>
-          <p>
-              未设置
-          </p>
-      </ion-card>
+        <ion-card>
+            <ion-button fill="clear">
+                <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png" alt="button tab">
+            </ion-button>
+            <p>
+                未设置
+            </p>
+        </ion-card>
 
-  </div>
+        <ion-card>
+            <ion-button fill="clear">
+                <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png" alt="button tab">
+            </ion-button>
+            <p>
+                未设置
+            </p>
+        </ion-card>
+
+    </div>
 </div>
 <ion-content>
 </ion-content>

E-Cover-app/src/app/tab1/tab1.page.scss

@@ -1,9 +1,18 @@
 #banner {
-    height: 300px;
-    background-color: #f8f8f8;
-    background-image: url(style-img/banner1.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
+    width: 100%;
+    height: 350px;
+}
+
+swiper-container {
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 350px;
+    swiper-slide,ion-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
 }
 
 #header {

E-Cover-app/src/app/tab1/tab1.page.ts

@@ -1,9 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
-import { IonicModule } from '@ionic/angular';
+import { IonicModule} from '@ionic/angular';
 import { addIcons } from 'ionicons';
 import { notificationsOutline, locationOutline } from 'ionicons/icons';
 import { Router } from '@angular/router';
+import { register } from 'swiper/element/bundle';
+
+register();
+
 addIcons({ 'location-outline': locationOutline, 'notifications-outline': notificationsOutline })
 @Component({
   selector: 'app-tab1',
@@ -11,12 +15,13 @@ addIcons({ 'location-outline': locationOutline, 'notifications-outline': notific
   styleUrls: ['tab1.page.scss'],
   standalone: true,
   imports: [ExploreContainerComponent, IonicModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
+
 export class Tab1Page {
   constructor(private router: Router) { }
   //转到GenerateOption页面
   goGenerateOption() {
     this.router.navigate(['generateOption']);
   }
-}
-
+}