Skip to content

移动端英雄轮播

概述

为移动端的 hero section 添加左右 slider 箭头按钮，提升移动用户的交互体验。

修改内容

1. 优化移动端箭头样式 (assets/scss/templates/_slider.scss)

箭头按钮优化

  • 位置调整: 移动端箭头位置从底部 15px 调整到 80px，避免与 scroll indicator 冲突
  • 布局改进:
  • 左箭头 (prevArrow): 移动端位于左侧 20px
  • 右箭头 (nextArrow): 移动端位于右侧 20px
  • 触摸友好:
  • 最小尺寸 48x48px，符合移动端触摸目标标准
  • 圆形设计，更适合移动交互
  • 增强阴影效果，提高可视性

圆点指示器调整

  • 移动端位置调整到 80px 高度，与箭头保持一致
  • 移动端居中显示，更符合移动端设计习惯
  • 间距优化，适配小屏幕

下滑提示器位置

  • 调整移动端位置，避免与 slider 控件重叠
  • 增加 140px 的底部间距，确保各元素不冲突

2. 样式特性

视觉设计

  • 毛玻璃效果: backdrop-filter 模糊背景
  • 半透明设计: 与 hero section 背景融合
  • 渐变交互: 悬停时颜色和位置变化
  • 阴影增强: 移动端增加更明显的阴影

响应式布局

  • 桌面端: 右侧排列，紧凑布局
  • 移动端: 左右分布，触摸优化
  • 适配性: 支持各种屏幕尺寸

可访问性

  • 保持键盘导航支持
  • 适当的触摸目标尺寸
  • 良好的颜色对比度

使用效果

桌面端

  • 箭头按钮位于右下角，紧凑排列
  • 圆点指示器位于左下角
  • 下滑提示器居中显示

移动端

  • 左右箭头分布在屏幕两侧，便于拇指操作
  • 圆点指示器居中显示，直观展示进度
  • 下滑提示器位置下移，避免重叠

交互体验

  • 滑动支持: 保持原有的触摸滑动功能
  • 按钮操作: 新增的箭头按钮提供精确控制
  • 视觉反馈: 悬停和点击时的动画效果

技术细节

CSS 层级管理

  • z-index: 10 确保控件在最上层
  • 合理的定位避免元素重叠

性能优化

  • 使用 CSS3 动画，硬件加速
  • backdrop-filter 优化，现代浏览器支持

兼容性

  • 移动端 WebKit 前缀支持
  • 渐进增强设计，不支持的浏览器降级显示

配置说明

slider 的 JavaScript 配置已经包含箭头设置：

arrows: true,
prevArrow: "<button class='prevArrow'><i class='fa-solid fa-angle-left'></i></button>",
nextArrow: "<button class='nextArrow'><i class='fa-solid fa-angle-right'></i></button>",

CSS 样式会自动处理移动端和桌面端的差异显示。