独特的分体布局设计
这不是一个标准的旋转木马,它是一个专用的图库界面,选择你的预览位置(左或右),并控制其宽度占总空间的百分比,缩略图整齐地坐在其旁边,在较小的屏幕上,使用“Stack on”功能自动垂直堆叠预览和缩略图,确保在每个设备上都能看到完美的视图。这种布局使用户能够清晰、专注地观看,并轻松导航。
- 灵活的布局控制:将预览设置为左侧或右侧的焦点,宽度可调(例如,70%)。
- 缩略图导航:用户可以点击缩略图直观、快速地更改主要预览。
- 移动响应式堆叠:自动将布局堆叠在平板电脑和移动设备上,以最佳利用垂直空间。
设计预览、缩略图
通过独立设计每个部分来实现完美的凝聚力设计。为预览区域的背景、边框和阴影进行样式设计。使用完整的排版、填充和对齐控件设计预览字幕。然后,为缩略图进行样式设计:控制其垂直/水平间距、边框、边框半径和对齐。最后,通过设计单独的悬停效果来创建引人入胜的交互,包括预览和缩略图,包括比例、阴影、滤镜和彩色覆盖层。
- 完整预览造型:向主图像区域添加背景、自定义高度和阴影。
- 缩略图网格控制:调整间距和边框以创建一个整齐、有组织的缩略图网格。
- 交互式反馈:为缩略图(比例、背景颜色、覆盖)和预览标题设置独特的悬停效果。
平滑的动画和过渡
以流畅、专业的动作让您的画廊栩栩如生。主要预览可以采用微妙的 Ken Burns 泛缩效果。选择方向(交叉、向上、向下)和位置。控制幻灯片之间的过渡速度。添加淡化或滑入的优雅字幕过渡。每次交互,从切换图像到悬停在缩略图上,都可以拥有定制的动画速度和轻松感,打造精致、优质的感觉。
- Ken Burns 效果:在主预览图像中添加慢速电影平移或缩放以增加活力。
- 自定义转换速度:控制单击缩略图时主图像更改的速度。
- 精致的微交互:缩略图和标题上的平滑悬停过渡增强了用户体验。
专业画廊控制和导航
Pro 那样管理您的图库 选择图像分辨率以获得最佳加载时间 启用滑块自动播放或让用户手动导航 在预览中添加时尚的导航箭头,并自定义其大小、颜色和悬停状态 每一个设置都旨在让您完全控制功能和美观。
- 自动播放和循环:设置图库以可调节的速度自动循环图像。
- 自定义导航箭头:设置上一个/下一个箭头以匹配您网站的设计。
画廊滑块的常见问题
与标准图像转盘相比,这的主要优势是什么?
1个标准的转盘,一次显示1张图片,带有点/箭头,这款Gallery Slider提供了一个两面板界面:一个大的预览图和一组可见的全部缩略图选项,这让用户一眼就能看到自己的选择,直接跳转到任何图片,对于拥有超过几张图片的画廊来说,效率高得多,用户友好。
我可以让缩略图显示在网格中而不是单行中吗?
是!缩略图的造型选项包括水平和垂直间距的控制,这是创建网格的关键,通过调整容器宽度和这些间距值,您可以在预览旁边创建一个多行缩略图网格。
Ken Burns 效果是否应用于所有图像?
启用后,Ken Burns 效果(慢速平移/缩放)将应用于主预览图像,它会在当前活动的照片上创建微妙、连续的动画,为您的图库增添生活感和深度。
许多高分辨率图像如何执行此操作?
为了获得最佳性能,请明智地使用图像分辨率设置(例如,如果显示尺寸不需要全分辨率,则使用 “Large” 而不是 “Full”)。元素经过优化,但加载 20 多个全尺寸图像将始终影响页面速度。考虑懒惰加载或将非常大的图库分成多个滑块。
我可以将此用于在线商店的产品图片库吗?
Absolutely。it’对于需要显示多个角度,颜色或细节的产品页面来说是一个绝佳的选择,用户可以点击不同颜色变体的缩略图,立即在主预览中看到它。只需将主“立即购买”按钮链接到您的购物车或产品页面即可。
"Stack on"功能在移动设备上会发生什么?
Stack on 设置为“平板&移动”时, 横向并排布局变为竖向堆栈, 大预览出现在顶部, 缩略图网格出现在其下方, 这确保了预览保持大且可视, 缩略图仍然很容易在触摸屏上点击。
