欢迎光临好主题官网！致力于 WordPress 企业主题定制开发及 WP外贸模板下载。
欢迎光临好主题官网！致力于 WordPress 企业主题定制开发及 WP外贸模板下载。
在使用 Elementor 制作企业网站首页 Banner、产品展示轮播或品牌宣传模块时，轮播组件不仅需要实现图片切换，还可以通过动画增强视觉表现力。
例如，轮播切换时，让当前图片从正常尺寸缓慢放大，营造一种镜头逐渐推进的视觉效果。这类动画常见于企业官网、工业设备网站、产品展示网站以及品牌宣传页面。
但是，Elementor 新版 Carousel 虽然支持幻灯片切换、自动播放、箭头导航和分页器等功能，却没有提供一个通用的设置项，可以直接控制每张图片在激活后从小到大播放缩放动画。
如果仅通过 CSS 设置当前幻灯片的图片放大，例如：
.swiper-slide-active img {
transform: scale(1.12);
}
虽然可以让当前图片放大，但仍有一个问题：当图片切换时，浏览器不一定会重新播放完整的放大动画。
原因是 CSS 的状态变化与动画重新开始并不是一回事。要实现每次切换都从初始尺寸重新放大，需要配合 JavaScript 监听轮播状态。
本文采用以下技术方案：
整个实现不需要额外安装轮播插件，也不需要修改 Elementor 核心文件。
完成配置后，轮播图片将具有以下效果：
需要说明的是，这里的放大动画针对的是 Slide 内部的 Image 图片组件，而不是整个 Slide 容器。因此，图片上的标题、按钮等其他元素不会跟着一起放大。
Elementor 新版 Carousel 使用 Swiper 轮播机制。轮播切换时，当前激活的幻灯片通常会获得以下 CSS 类名：
.swiper-slide-active
因此，可以利用这个状态识别当前幻灯片。
整个实现过程分为三个步骤。
通过 @keyframes 定义图片从 scale(1) 变为 scale(1.12) 的动画。
通过 MutationObserver 监听 Swiper 幻灯片的 class 属性变化。当激活状态发生变化时，判断是否需要重新播放动画。
先移除图片上的动画类名，再让浏览器应用重置后的样式，最后重新添加动画类名。
这样，即使同一个图片元素再次成为激活幻灯片，也能够重新播放放大动画。
首先，进入 WordPress 后台，使用 Elementor 编辑目标页面。
选中需要添加动画的 Carousel 组件，然后进入：
高级 → CSS 类
填写以下类名：
hzt-zoom-carousel
注意，这里只填写类名，不要添加开头的英文句点。
这个类名用于限定动画的作用范围，避免影响网站中其他轮播组件。
如果页面中有多个 Carousel 需要使用相同效果，可以为它们添加相同的类名。
将下面的 CSS 添加到 WordPress 后台的「外观 → 自定义 → 额外 CSS」，也可以放在 Elementor Pro 支持的自定义 CSS 中。
/* Elementor Carousel 图片放大动画 */
/* 图片组件负责裁剪放大后的溢出区域 */
.hzt-zoom-carousel
.swiper-slide
.elementor-widget-image {
overflow: hidden;
}
/* 图片默认状态 */
.hzt-zoom-carousel
.swiper-slide
.elementor-widget-image img {
display: block;
transform: scale(1);
transform-origin: center center;
will-change: transform;
}
/* 当前激活的图片播放放大动画 */
.hzt-zoom-carousel
.swiper-slide
.elementor-widget-image img.hzt-zoom-in {
animation: hzt-carousel-zoom 8s ease-out both;
}
/* 图片从原始尺寸缓慢放大 */
@keyframes hzt-carousel-zoom {
from {
transform: scale(1);
}
to {
transform: scale(1.12);
}
}
/* 尊重用户减少动态效果的系统偏好 */
@media (prefers-reduced-motion: reduce) {
.hzt-zoom-carousel
.swiper-slide
.elementor-widget-image img {
animation: none !important;
transform: none !important;
}
}
| CSS 属性 | 设置值 | 作用 |
|---|---|---|
scale(1) |
100% | 图片初始尺寸 |
scale(1.12) |
112% | 图片最终尺寸 |
8s |
8 秒 | 动画持续时间 |
ease-out |
缓出 | 动画开始较快，随后逐渐减速 |
transform-origin |
居中 | 以图片中心为基准放大 |
overflow: hidden |
隐藏溢出 | 避免放大部分超出图片容器 |
如果希望放大效果更加明显，可以将 scale(1.12) 调整为 scale(1.15)。
如果希望动画更加缓慢，可以将 8s 调整为 10s。
需要注意，动画时长不等于轮播切换时长。CSS 动画控制图片放大过程，而 Elementor 的 Transition Duration 控制幻灯片切换过程。
仅有 CSS 还不够。为了确保每次切换到新幻灯片时，图片都能从初始尺寸重新放大，需要使用 JavaScript 重置动画状态。
将下面的代码添加到 Elementor Pro 的「自定义代码」功能中，位置选择 Footer；也可以放入主题或自定义插件的 JavaScript 文件中。
(function () {
'use strict';
function initHztZoomCarousel(carousel) {
// 防止重复初始化
if (
carousel.dataset.hztZoomInitialized === '1'
) {
return;
}
const wrapper = carousel.querySelector(
'.swiper-wrapper'
);
if (!wrapper) {
return;
}
carousel.dataset.hztZoomInitialized = '1';
let frameId = null;
function restartZoom() {
if (frameId) {
cancelAnimationFrame(frameId);
}
frameId = requestAnimationFrame(function () {
frameId = null;
// 清除所有幻灯片的动画状态
const slides = wrapper.querySelectorAll(
'.swiper-slide'
);
slides.forEach(function (slide) {
slide.querySelectorAll(
'.elementor-widget-image img.hzt-zoom-in'
).forEach(function (img) {
img.classList.remove(
'hzt-zoom-in'
);
});
});
// 强制浏览器应用动画重置状态
void carousel.offsetWidth;
// 为当前激活幻灯片的图片重新添加动画类
wrapper.querySelectorAll(
'.swiper-slide-active ' +
'.elementor-widget-image img'
).forEach(function (img) {
img.classList.add('hzt-zoom-in');
});
});
}
// 监听幻灯片 class 属性变化
const observer = new MutationObserver(
function (records) {
const slideChanged = records.some(
function (record) {
return (
record.target.matches &&
record.target.matches(
'.swiper-slide'
)
);
}
);
if (slideChanged) {
restartZoom();
}
}
);
observer.observe(wrapper, {
subtree: true,
attributes: true,
attributeFilter: ['class']
});
// 页面初始化时播放当前激活图片的动画
restartZoom();
}
function initAllCarousels() {
document.querySelectorAll(
'.hzt-zoom-carousel'
).forEach(initHztZoomCarousel);
}
// 兼容普通页面加载
if (document.readyState === 'loading') {
document.addEventListener(
'DOMContentLoaded',
initAllCarousels
);
} else {
initAllCarousels();
}
// 兼容 Elementor 前端组件初始化
if (window.jQuery) {
window.jQuery(window).on(
'elementor/frontend/init',
function () {
if (
window.elementorFrontend &&
window.elementorFrontend.hooks
) {
window.elementorFrontend.hooks.addAction(
'frontend/element_ready/global',
function ($scope) {
const element = $scope;
if (!element) {
return;
}
if (
element.matches(
'.hzt-zoom-carousel'
)
) {
initHztZoomCarousel(element);
}
element.querySelectorAll(
'.hzt-zoom-carousel'
).forEach(
initHztZoomCarousel
);
}
);
}
initAllCarousels();
}
);
}
})();
这段代码主要完成四件事。
第一，识别目标 Carousel。
通过 .hzt-zoom-carousel 找到需要添加动画的组件，不会主动修改其他 Carousel。
第二，监听幻灯片状态变化。
通过 MutationObserver 监听 .swiper-slide 的 class 属性，识别当前激活幻灯片的变化。
第三，清除旧动画。
移除图片上的 hzt-zoom-in 类名，让图片恢复到 CSS 定义的初始状态。
第四，重新播放动画。
找到带有 .swiper-slide-active 类的幻灯片，为其中的 Image 图片重新添加 hzt-zoom-in 类名。
这使得每次轮播切换都能重新开始放大过程，而不是只在页面首次加载时播放一次。
需要注意，代码针对的是图片组件直接位于 Slide 内部的常见结构。如果你的图片被放在额外的嵌套容器中，或者使用的是背景图片而非 Image 组件，需要根据实际 HTML 结构调整选择器。
完成 CSS 和 JavaScript 配置后，回到 Elementor 编辑器，选中 Carousel 组件。
可以先使用下面这组参数进行测试。
| 参数 | 建议设置 | 说明 |
|---|---|---|
| Slides on display | 1 | 一次显示一张幻灯片 |
| Slides on scroll | 1 | 每次切换一张 |
| Transition Duration | 600 ms | 控制幻灯片切换速度 |
| Autoplay | 按需开启 | 是否自动播放 |
| Autoplay 间隔 | 8000～10000 ms | 根据动画时长调整切换间隔 |
这些数值是推荐的起始配置，并不是所有项目都必须使用的固定参数。
如果自动播放间隔设置为 8 秒，而图片放大动画也需要 8 秒，那么动画可能刚结束就开始切换。若希望用户能看到完整的放大过程，可以适当延长自动播放间隔。
代码添加完成后，建议按照以下步骤进行测试。
打开网站前端页面，观察第一张当前激活的图片是否从正常尺寸缓慢放大。
点击下一张箭头，观察新图片是否重新从初始尺寸放大。
然后点击上一张箭头，确认反向切换时同样有效。
如果开启了自动播放，等待轮播自动切换，确认新激活的图片能够重新触发动画。
如果开启了无限循环，继续切换到最后一张，再返回第一张，观察动画是否正常。
Swiper 在循环模式下可能会调整或重新排列幻灯片，因此需要重点测试循环边界。
在 Elementor 的移动端预览和真实移动设备上分别检查：
如果使用 WP Rocket 等缓存或优化工具，修改代码后还应清理页面缓存，并确认 JavaScript 没有因延迟执行、合并或压缩而出现异常。
优先检查以下项目：
hzt-zoom-carousel。.elementor-widget-image 内部。.swiper-slide-active 类。可以在浏览器开发者工具中检查图片元素，确认动画播放时是否出现 hzt-zoom-in 类名。
如果没有该类名，通常需要检查 JavaScript 是否执行，以及实际的 Carousel DOM 结构是否与选择器一致。
CSS 中已经对图片组件设置了：
overflow: hidden;
如果图片仍然溢出，可能是实际承担裁剪任务的元素并不是 .elementor-widget-image，或者外层容器的尺寸和溢出设置不合适。
此时应检查图片组件及其父级容器，根据实际结构把 overflow: hidden 设置到正确的元素上，而不是盲目给整个页面添加隐藏溢出的样式。
首先检查 JavaScript 是否成功监听到幻灯片的 class 变化。
正常情况下，每次切换后，当前激活的幻灯片会发生状态变化，脚本会移除旧动画类名并重新添加。
如果当前 Elementor 版本或特定轮播配置没有按预期改变相关类名，就需要检查真实 DOM 的变化情况，再调整监听逻辑。
另外，CSS 动画被其他选择器覆盖时，也可能导致图片无法按预期缩放。
这是当前实现的预期行为。
脚本只选择 .swiper-slide-active 对应幻灯片中的图片。如果 Carousel 同时显示多张幻灯片，其他可见幻灯片不一定具有该激活类名。
如果项目需要所有可见图片都播放动画，应进一步根据 Swiper 的可见状态或实际布局来判断，而不能仅依赖 .swiper-slide-active。
这是当前方案的设计目标。
动画只应用于 Image 组件中的 img 元素，因此同一 Slide 中的标题、描述、按钮不会跟着放大。
如果需要整个 Slide 一起缩放，就应该把动画作用对象调整为幻灯片内部的主容器。但这样会改变文字和按钮的尺寸与位置，需要根据设计稿谨慎处理。
在企业网站中使用图片缩放动画时，还需要考虑性能和用户体验。
通常建议将图片放大比例控制在 1.08～1.15 之间。过大的缩放比例可能导致主体被裁切，尤其是人物、工业设备和带有文字的图片。
对于首页 Banner，可以先尝试 6～10 秒的缓慢缩放。产品卡片或小尺寸轮播则可以使用更短的动画，避免用户等待过久。
图片放大后，实际显示区域会变大。如果原始图片分辨率过低，可能出现模糊。因此，应该根据轮播区域尺寸选择合适的图片分辨率，并合理压缩图片文件。
本文脚本通过 data-hzt-zoom-initialized 标记避免重复初始化同一个 Carousel，减少重复创建监听器的风险。
但如果页面中存在动态销毁和重建 Carousel 的复杂场景，还应根据具体生命周期进一步处理监听器的清理。
部分用户会在操作系统中开启减少动态效果选项。本文通过 prefers-reduced-motion 媒体查询关闭缩放动画，以提升可访问性。
Elementor 新版 Carousel 没有直接提供所需的图片切换放大动画时，可以通过 CSS 和 JavaScript 补充实现，而不必更换整个轮播组件。
本文采用的实现方式具有以下特点：
需要注意，前述代码针对 Elementor Image 组件和常见的 Swiper DOM 结构编写。不同 Elementor 版本、嵌套结构或特殊轮播设置可能存在差异，上线前应在实际页面中验证。
对于 WordPress 企业网站开发来说，这是一种比较轻量的增强方式：保留原有组件的内容编辑能力，只通过少量自定义代码补充原生设置中缺少的视觉效果。
如果还需要进一步扩展，也可以在此基础上增加图片缩小淡出、左右滑动时的不同缩放效果、多个可见 Slide 的动画，以及针对桌面端和移动端的不同动画参数。
本文由 好主题 原创整理，致力于分享实用的 WordPress 建站知识与主题开发经验。 我们专注于提供高质量的 WordPress企业主题 资源，帮助中小企业轻松构建专业网站。 转载请注明来源，并保留原文链接，感谢您的支持与理解。
联系我们
教程看不懂？联系我们免费为您解答！免费助力个人，小企站点！
成为会员，获得更多专属优惠！
登录您的账户，享受会员专属服务
