具有自定义图像位置的全屏背景幻灯片(每张幻灯片)

Fullscreen background slideshow with custom image positions (per slide)

本文关键字:幻灯片 背景 自定义 图像 位置      更新时间:2023-09-26

我有一个客户,他有一个图像库,他们想在网站上用作全屏背景。

我正在使用超大 js 中的幻灯片功能 + api 调用作为网站导航中幻灯片/子页面的背景,这与我的前景元素很好地配合在一起,以创建良好的多页效果。

唯一的问题是他们的一些图像不能很好地居中工作,而应该顶部对齐(因为如果图像居中,图像的焦点会在较大的窗口尺寸下被切断)。

目前,我正在做一个非常讨厌的手动销毁和重建,以便在不同时进行调整(目前图像在CMS中进行管理,因此如果图像是垂直对齐的,用户只需选择一个框)。这确实可以解决问题,但很笨重,并且有一些令人讨厌的跳跃性。

您是否知道一种在不破坏/重建的情况下执行此操作的方法,或者是否有其他插件可以处理此问题(并且仍然可以使用我描述的分页功能?

谢谢大家!

你可以试试jQuery.mb.bandGallery插件。它的优点是,在全屏模式下,它将调整图像大小并居中以适应屏幕。

或者,您可以尝试/从 tympanus.net/codrops 的多篇文章和演示中获得灵感,例如:

  • 动画内容菜单
  • 全屏图像模糊
  • 响应式 3D 面板布局