update for swiper

package.json

@@ -21,7 +21,7 @@
     "@angular/platform-browser": "^17.0.2",
     "@angular/platform-browser-dynamic": "^17.0.2",
     "@angular/router": "^17.0.2",
-    "@ionic/angular": "^8.0.0",
+    "@ionic/angular": "^8.2.5",
     "ionicons": "^7.0.0",
     "parse": "^5.1.0",
     "rxjs": "~7.8.0",
@@ -39,6 +39,7 @@
     "@angular/cli": "17.3.8",
     "@angular/compiler-cli": "^17.0.2",
     "@angular/language-service": "^17.0.2",
+    "@compodoc/compodoc": "^1.1.25",
     "@ionic/angular-toolkit": "^11.0.1",
     "@types/jasmine": "~5.1.0",
     "@types/parse": "^3.0.9",

src/app/app.component.ts

@@ -3,6 +3,9 @@ import * as Parse from "parse";
 Parse.initialize("dev");
 (Parse as any).serverURL = 'http://web2023.fmode.cn:9999/parse'
 // import function to register Swiper custom elements
+import { register } from 'swiper/element/bundle';
+
+register();
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+
 @NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

src/app/tab1/tab1.module.ts

@@ -5,8 +5,9 @@ import { FormsModule } from '@angular/forms';
 import { Tab1Page } from './tab1.page';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 import { Tab1PageRoutingModule } from './tab1-routing.module';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 @NgModule({
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     IonicModule,
     CommonModule,

src/app/tab1/tab1.page.html

@@ -8,9 +8,14 @@
 </ion-header>
 
 <ion-content class="ion-padding">
-
+  <swiper-container  [loop]="true">
+    <swiper-slide><ion-img src="assets/img/banner.jpg"></ion-img></swiper-slide>
+    <swiper-slide><ion-img src="assets/img/banner2.jpg"></ion-img></swiper-slide>
+    <swiper-slide><ion-img src="assets/img/banner3.jpg"></ion-img></swiper-slide>
+  </swiper-container>
     <!-- Banner横幅图片 -->
-    <ion-img src="assets/img/banner.jpg"></ion-img>
+    
+    <!-- <ion-img src="assets/img/banner.jpg"></ion-img> -->
 
     <ion-card (click)="navigateTo('模拟面试')"routerLink="/ai/chat">
       <ion-card-header>
@@ -26,17 +31,17 @@
         <ion-card-title>MBTI测试</ion-card-title>
       </ion-card-header>
       <ion-card-content>
-        人格测试，看看你适合什么工作 
+        人格测试，看看你属于哪一种
       </ion-card-content>
     </ion-card>
   
-    <!-- 霍兰德测试模块 -->
-    <ion-card (click)="navigateTo('职业技能树')">
+    <!-- 职业推荐模块 -->
+    <ion-card (click)="navigateTo('职业技能树')"routerLink="/test/job-recommend">
       <ion-card-header>
-        <ion-card-title>职业技能树</ion-card-title>
+        <ion-card-title>职业推荐</ion-card-title>
       </ion-card-header>
       <ion-card-content>
-        了解职业所需技能
+        了解适合你的工作
       </ion-card-content>
     </ion-card>
   

src/app/tab1/tab1.page.scss

@@ -0,0 +1,22 @@
+swiper-slide img {
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    max-height: 70%;
+  }
+  swiper-slide {
+    display: flex;
+    position: relative;
+  
+    flex-direction: column;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  
+    font-size: 18px;
+  
+    text-align: center;
+    box-sizing: border-box;
+  }

src/modules/test/job-recommend/job-recommend.page.html

@@ -1,13 +1,9 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>job-recommend</ion-title>
+    <ion-title>职业推荐</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">job-recommend</ion-title>
-    </ion-toolbar>
-  </ion-header>
+
 </ion-content>

tsconfig.doc.json

@@ -0,0 +1,3 @@
+{    
+     "include": ["src/**/*.ts"]
+}