JavaScript UI Effects

3 个响应式交互页面效果

已重新整理为适合 GitHub Pages 的目录结构：HTML、CSS、JS、图片与截图分开管理。打开下方任意 Demo 即可查看对应效果。

GitHub Pages Ready 上传整个文件夹后，入口文件为 index.html。
Timeline accordion screenshot
Effect 01

Timeline Accordion

左侧年份菜单点击展开，其他项自动收起，右侧图片同步切换；手机端展开项下方显示对应图片。

AccordionResponsiveImage Switch
查看效果
Destination carousel screenshot
Effect 02

Destination Card Carousel

Swiper 卡片轮播：电脑端一行 4 个、每次滚动 4 个；手机端一行 2 个、每次滚动 2 个，并带分页圆点。

SwiperAutoplayPagination
查看效果
Nested carousel screenshot
Effect 03

Nested Card Carousel

外层是卡片轮播，卡片内部图片也是独立 Swiper 轮播；内部图片不自动播放，只通过左右箭头切换。

Nested SwiperCard GalleryMobile Ready
查看效果

整理后的目录结构

index.html
assets/
  css/
    base.css
    showcase.css
    timeline-accordion.css
    destination-carousel.css
    nested-card-carousel.css
  js/
    timeline-accordion.js
    destination-carousel.js
    nested-card-carousel.js
  images/
    timeline/
    destinations/
    deals/
  screenshots/
demos/
  timeline-accordion.html
  destination-card-carousel.html
  nested-card-carousel.html