|
@@ -2,6 +2,13 @@ import { Component, AfterViewInit } from '@angular/core';
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
import Swiper from 'swiper';
|
|
|
|
|
|
+// 添加这些导入
|
|
|
+import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
|
|
+import 'swiper/css';
|
|
|
+import 'swiper/css/navigation';
|
|
|
+import 'swiper/css/pagination';
|
|
|
+
|
|
|
+
|
|
|
interface PlatformModule {
|
|
|
title: string;
|
|
|
subtitle: string;
|
|
@@ -97,12 +104,74 @@ export class PageCrmPlatform implements AfterViewInit {
|
|
|
];
|
|
|
|
|
|
slides: Slide[] = [
|
|
|
- // ...保持不变...
|
|
|
+ {
|
|
|
+ image: 'assets/images/red.webp',
|
|
|
+ title: '红色文化数字馆',
|
|
|
+ description: '探索江西丰富的革命历史资源,数字化保存红色记忆'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image: 'path/to/image2.jpg',
|
|
|
+ title: '非遗传承数据库',
|
|
|
+ description: '记录与保护江西非物质文化遗产,传承千年技艺'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image: 'path/to/image3.jpg',
|
|
|
+ title: '水文化研究中心',
|
|
|
+ description: '聚焦鄱阳湖流域水文化研究,展现江西水韵之美'
|
|
|
+ }
|
|
|
];
|
|
|
|
|
|
ngAfterViewInit() {
|
|
|
- new Swiper('.swiper-container', {
|
|
|
- // ...配置保持不变...
|
|
|
- });
|
|
|
- }
|
|
|
-}
|
|
|
+ new Swiper('.swiper-container', {
|
|
|
+ // 启用导航模块
|
|
|
+ modules: [Navigation, Pagination, Autoplay],
|
|
|
+
|
|
|
+ // 基本配置
|
|
|
+ direction: 'horizontal',
|
|
|
+ loop: true,
|
|
|
+ speed: 600,
|
|
|
+
|
|
|
+ // 分页器配置
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination',
|
|
|
+ clickable: true,
|
|
|
+ dynamicBullets: true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 导航按钮配置(关键修复)
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.swiper-button-next',
|
|
|
+ prevEl: '.swiper-button-prev',
|
|
|
+ disabledClass: 'swiper-button-disabled' // 添加禁用状态类
|
|
|
+ },
|
|
|
+
|
|
|
+ // 自动播放配置
|
|
|
+ autoplay: {
|
|
|
+ delay: 5000,
|
|
|
+ disableOnInteraction: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ // 效果配置
|
|
|
+ effect: 'fade',
|
|
|
+ fadeEffect: {
|
|
|
+ crossFade: true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 键盘控制
|
|
|
+ keyboard: {
|
|
|
+ enabled: true,
|
|
|
+ onlyInViewport: true,
|
|
|
+ },
|
|
|
+
|
|
|
+ // 触摸控制
|
|
|
+ grabCursor: true,
|
|
|
+
|
|
|
+ // 响应式配置
|
|
|
+ breakpoints: {
|
|
|
+ 480: {
|
|
|
+ effect: 'slide'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+}
|