轮播图完成

src/app/tab1/tab1.page.html

@@ -13,16 +13,12 @@
 
 
 <ion-content>
-  <div class="swiper-container">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide" (click)="navigateToBannerPage('banner1')"><img src="assets/images/homepage/home2_1.jpg" alt="Image 1"></div>
-      <div class="swiper-slide" (click)="navigateToBannerPage('banner2')"><img src="assets/images/homepage/home2_2.jpg" alt="Image 2"></div>
-      <div class="swiper-slide" (click)="navigateToBannerPage('banner3')"><img src="assets/images/homepage/home2_3.jpg" alt="Image 3"></div>
-    </div>
-    <div class="swiper-pagination"></div>
-  </div>
-
 
+  <div class="carousel">  
+    <div class="carousel-item">  
+      <img [src]="slides[currentIndex].image" alt="Slide">  
+    </div>  
+  </div>  
 
   <!-- 最近更新 -->
   <ion-card>

src/app/tab1/tab1.page.scss

@@ -1,16 +1,34 @@
-.swiper-container {
-    width: 100%;
-    height: 200px; /* 设置轮播图高度 */
-  }
-  
-  .swiper-slide img {
-    width: 100%;
-    height: 100%;
-    object-fit: fill; /* 图片填充方式 */
-  }
+.carousel {
+  padding: 5%;
+  display: flex;  
+  overflow-x: auto;  
+  scrollbar-width: none; /* Firefox */  
+  -ms-overflow-style: none; /* IE 10+ */  
+
+  &::-webkit-scrollbar {  
+    display: none; /* Chrome, Safari, Opera*/  
+  }  
+
+  .carousel-item {  
+    flex: 0 0 auto;  
+    width: 100%; 
+    height: 250px;
+    // padding-top: 35px; 
+    // overflow-x: hidden;
+    // margin-right: 10px; 
+    
+    img {  
+      width: 100%;  
+      // display: block;  
+      height: 100%;
+      object-fit: fill; /* 图片填充方式 */
+    }  
+  }  
+}
+
 
 
-.image-row {
+.image-row { 
     display: flex;
     justify-content: space-between;
   }

src/app/tab1/tab1.page.ts

@@ -1,7 +1,7 @@
 // import { Component } from '@angular/core';
 // import { AlertController } from '@ionic/angular';
 
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild  } from '@angular/core';
 import Swiper from 'swiper';
 import { Router } from '@angular/router';
 
@@ -54,18 +54,23 @@ export class Tab1Page implements OnInit {
     console.log('Navigating to Blank page');
   }
 
-  ngOnInit() {
-    const swiper = new Swiper('.swiper-container', {
-      loop: true,
-      pagination: {
-        el: '.swiper-pagination',
-        clickable: true,  
-      },
-      autoplay: {
-        delay: 2000, // 设置轮播时间为2秒
-      },
-      speed: 1000, // 设置过渡速度为1000ms
-    });
+  results:Parse.Object[] = []
+  segment = 'tang';  
+  slides = [  
+    { image: 'assets/images/homepage/home2_1.jpg' },  
+    { image: 'assets/images/homepage/home2_2.jpg' },  
+    { image: 'assets/images/homepage/home2_3.jpg' }  
+  ];  
+  currentIndex = 0;  
+  
+  ngOnInit() {  
+    setInterval(() => {  
+      this.nextSlide();  
+    }, 3000); // 每3秒切换一次图片  
+  }  
+  
+  nextSlide() {  
+    this.currentIndex = (this.currentIndex + 1) % this.slides.length;  
   }
 
 }

src/index.html

@@ -6,8 +6,8 @@
   <title>影迹寻踪</title>
 
   <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/7.0.9/swiper-bundle.min.css">
-<!-- swiper -->
-
+  <!-- swiper -->
+  <!-- <link rel="stylesheet" href="assets/swiper/swiper.min.css"> -->
 
   <base href="/" />