用Elementor 编辑
首页添加幻灯片：
<div class="global-footprint-section"
style="max-width: 1290px; margin: 1px auto; padding: 6px 20px; border-radius: 12px; overflow: hidden; position: relative;">
<!-- 轮播主容器 -->
<div id="global-slider" style="position: relative; width: 100%; height: 580px; overflow: hidden;">
<!-- Slide 1: 原地球仪 + 文字 -->
<div class="slide active"
style="position: absolute; inset: 0; opacity: 1; transition: opacity 1.5s ease; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 60px; padding: 0 40px; box-sizing: border-box;">
<!-- 左侧文字 -->
<div style="flex: 1 1 400px; min-width: 300px; text-align: center; z-index: 2;">
<h2 style="font-size: 3.2rem; font-weight: 900; color: #000; margin-bottom: 2px; line-height: 1.1;">One
EMS company-One-Stop Solution</h2>
<p style="font-size: 1.4rem; color: #333; line-height: 1.6; margin-bottom: 1px;">
We aim to improve production output by reducing costs and minimizing defect rates
</p>
<a href="https://sunstrong.com.sg/global-footprint"
style="display: inline-block; background: #0066cc; color: white; font-weight: 600; padding: 16px 40px; border-radius: 50px; text-decoration: none; font-size: 1.25rem; transition: all 0.4s ease; box-shadow: 0 8px 20px rgba(0,102,204,0.25);">
Explore more →
</a>
</div>
<!-- 右侧地球仪 -->
<div style="flex: 1 1 400px; min-width: 300px; position: relative; text-align: center; z-index: 1;">
<div style="position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; margin: 0 auto;">
<img src="https://sunstrong.com.sg/wp-content/uploads/2026/03/globe.webp" alt="Global Network"
style="width: 100%; height: 100%; object-fit: contain; border-radius: 50%; box-shadow: 0 20px 60px rgba(0,102,204,0.2); animation: gentleRotate 120s linear infinite;" />
<div
style="position: absolute; inset: 0; border: 3px solid rgba(0,102,204,0.3); border-radius: 50%; animation: pulseRing 6s ease-in-out infinite; pointer-events: none;">
</div>
</div>
</div>
</div>
<!-- Slide 2: 示例 - 数据中心加速部署 -->
<div class="slide"
style="position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 60px; padding: 0 40px; box-sizing: border-box;">
<!-- 左侧文字 -->
<div style="flex: 1 1 400px; min-width: 300px; text-align: center; z-index: 2;">
<h2 style="font-size: 3.2rem; font-weight: 900; color: #000; margin-bottom: 2px; line-height: 1.1;">
Accelerate data center deployment</h2>
<p style="font-size: 1.4rem; color: #333; line-height: 1.6; margin-bottom: 4px;">
Flex AI infrastructure platform speeds time-to-market up to 30%
</p>
<a href="#"
style="display: inline-block; background: #0066cc; color: white; font-weight: 600; padding: 16px 40px; border-radius: 50px; text-decoration: none; font-size: 1.25rem; transition: all 0.4s ease; box-shadow: 0 8px 20px rgba(0,102,204,0.25);">
Get all the details →
</a>
</div>
<!-- 右侧图片 -->
<div style="flex: 1 1 400px; min-width: 300px; position: relative; text-align: center; z-index: 1;">
<img src="https://sunstrong.com.sg/wp-content/uploads/2026/03/dc-ai-infrastructure-graphic.webp"
alt="Data Center"
style="width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.15);" />
</div>
</div>
<!-- Slide 3: 示例 - 供应链韧性 -->
<div class="slide" style="position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 60px; padding: 0 40px; box-sizing: border-box;
">
<!-- 左侧文字 -->
<div style="flex: 1 1 400px; min-width: 300px; text-align: center; z-index: 2;">
<h2 style="font-size: 3.2rem; font-weight: 900; color: #000; margin-bottom: 2px; line-height: 1.1;">
Boosting supply chain resilience</h2>
<p style="font-size: 1.4rem; color: #333; line-height: 1.6; margin-bottom: 4px;">
Navigating disruptions with greater visibility and flexibility
</p>
<a href="#"
style="display: inline-block; background: #0066cc; color: white; font-weight: 600; padding: 16px 40px; border-radius: 50px; text-decoration: none; font-size: 1.25rem; transition: all 0.4s ease; box-shadow: 0 8px 20px rgba(0,102,204,0.25);">
Read the eBook →
</a>
</div>
<!-- 右侧图片 -->
<div style="flex: 1 1 400px; min-width: 300px; position: relative; text-align: center; z-index: 1;">
<img src="https://sunstrong.com.sg/wp-content/uploads/2026/03/laptop-flex-pulse-screen.webp"
alt="Supply Chain" style="
width: 100%;
height: auto;
max-height: 70vh;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
animation: float 7s ease-in-out infinite;
transform-origin: center;
" />
</div>
<style>
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(1.5deg);
}
}
</style>
</div>
<!-- 底部小圆点 -->
<div class="slider-dots"
style="position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 16px; z-index: 10;">
<span class="dot active" data-index="0"
style="width: 14px; height: 14px; background: #0066cc; border-radius: 50%; cursor: pointer; transition: all 0.3s;"></span>
<span class="dot" data-index="1"
style="width: 14px; height: 14px; background: rgba(0,0,0,0.3); border-radius: 50%; cursor: pointer; transition: all 0.3s;"></span>
<span class="dot" data-index="2"
style="width: 14px; height: 14px; background: rgba(0,0,0,0.3); border-radius: 50%; cursor: pointer; transition: all 0.3s;"></span>
</div>
</div>
<!-- 动画 keyframes -->
<style>
.slide {
opacity: 0;
}
.slide.active {
opacity: 1;
}
.dot.active {
background: #0066cc !important;
transform: scale(1.4);
}
@keyframes gentleRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulseRing {
0%,
100% {
transform: scale(1);
opacity: 0.4;
}
50% {
transform: scale(1.15);
opacity: 0.7;
}
}
@media (max-width: 1024px) {
#global-slider {
height: auto;
aspect-ratio: auto;
padding-bottom: 100%;
}
.content-wrapper {
flex-direction: column;
gap: 40px;
}
h2 {
font-size: 2.6rem !important;
text-align: center;
}
p {
font-size: 1.3rem !important;
text-align: center;
}
a {
margin: 0 auto;
}
}
</style>
<!-- JavaScript 轮播逻辑（无左右箭头） -->
<script>
const slider = document.getElementById('global-slider');
const slides = slider.querySelectorAll('.slide');
const dots = slider.querySelectorAll('.dot');
let currentIndex = 0;
let autoPlay = setInterval(nextSlide, 10000); // 每9秒切换一次，可自行调整
function showSlide(index) {
slides.forEach((slide, i) => {
slide.style.opacity = i === index ? '1' : '0';
});
dots.forEach((dot, i) => {
dot.classList.toggle('active', i === index);
});
currentIndex = index;
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
}
// 小圆点点击切换
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
clearInterval(autoPlay);
showSlide(index);
autoPlay = setInterval(nextSlide, 10000);
});
});
// 鼠标悬停暂停自动播放
slider.addEventListener('mouseenter', () => clearInterval(autoPlay));
slider.addEventListener('mouseleave', () => autoPlay = setInterval(nextSlide, 10000));
</script>
</div>
展示中间栏位：
<div class="featured-insights" style="max-width: 1400px; margin: 60px auto; padding: 0 20px; border-radius: 12px;">
<div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center;">
<!-- Card 1 -->
<div class="insight-card" style="flex: 1 1 300px; max-width: 380px; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.08); transition: all 0.3s ease;">
<div style="height: 240px; background-size: cover; background-position: center; background-image: url('https://sunstrong.com.sg/wp-content/uploads/2026/03/BeyondCapex_Flex.com-1-760x428-1.png'); position: relative;">
<div style="position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 100%);"></div>
</div>
<div style="padding: 25px 20px; text-align: left;">
<h3 style="font-size: 1.5rem; font-weight: 800; margin: 0 0 12px; color: #000; line-height: 1.3;">Closing the power efficiency gap in AI data centers</h3>
<p style="font-size: 1.1rem; color: #333; margin: 0 0 20px; line-height: 1.6; font-weight: 500;">Flex CEO Revathi Advaithi on why power efficiency inside AI data centers is critical to AI innovation's next wave.</p>
<a href="https://www.datacenterdynamics.com/en/opinions/beyond-capex-closing-the-power-efficiency-gap-in-ai-data-centers" style="display: inline-block; color: #0066cc; font-weight: 600; font-size: 1.1rem; text-decoration: none; transition: color 0.2s;">Find out more →</a>
</div>
</div>
<!-- Card 2 -->
<div class="insight-card" style="flex: 1 1 300px; max-width: 380px; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.08); transition: all 0.3s ease;">
<div style="height: 240px; background-size: cover; background-position: center; background-image: url('https://sunstrong.com.sg/wp-content/uploads/2026/03/微信图片_20260312165415_407_54.png'); position: relative;">
<div style="position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 100%);"></div>
</div>
<div style="padding: 25px 20px; text-align: left;">
<h3 style="font-size: 1.5rem; font-weight: 800; margin: 0 0 12px; color: #000; line-height: 1.3;">Bloomberg Open Interest and Flex CEO on the quiet giant behind AI</h3>
<p style="font-size: 1.1rem; color: #333; margin: 0 0 20px; line-height: 1.6; font-weight: 500;">Revathi joined Bloomberg to break down Flex's transformation to the company powering every major hyperscaler.</p>
<a href="https://www.bloomberg.com/news/videos/2025-12-05/the-quiet-giant-behind-ai-video" style="display: inline-block; color: #0066cc; font-weight: 600; font-size: 1.1rem; text-decoration: none; transition: color 0.2s;">Find out more →</a>
</div>
</div>
<!-- Card 3 -->
<div class="insight-card" style="flex: 1 1 300px; max-width: 380px; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.08); transition: all 0.3s ease;">
<div style="height: 240px; background-size: cover; background-position: center; background-image: url('https://sunstrong.com.sg/wp-content/uploads/2026/03/微信图片_20260312165440_408_54.png'); position: relative;">
<div style="position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 100%);"></div>
</div>
<div style="padding: 25px 20px; text-align: left;">
<h3 style="font-size: 1.5rem; font-weight: 800; margin: 0 0 12px; color: #000; line-height: 1.3;">Collaborating for high-performance, energy-efficient AI factories</h3>
<p style="font-size: 1.1rem; color: #333; margin: 0 0 20px; line-height: 1.6; font-weight: 500;">Announcing our support in the development of modular data center systems with NVIDIA.</p>
<a href="https://www.prnewswire.com/news-releases/flex-to-accelerate-deployment-of-giga-scale-ai-factories-with-nvidia-302595944.html" style="display: inline-block; color: #0066cc; font-weight: 600; font-size: 1.1rem; text-decoration: none; transition: color 0.2s;">Find out more →</a>
</div>
</div>
</div>
<!-- 样式 -->
<style>
.insight-card:hover {
transform: translateY(-12px) scale(1.03);
box-shadow: 0 25px 60px rgba(0,102,204,0.25);
}
/* 首次加载交错淡入动画 */
@keyframes cardEntrance {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.insight-card {
animation: cardEntrance 0.9s ease-out forwards;
opacity: 0; /* 初始隐藏 */
will-change: opacity, transform; /* 优化性能 */
}
/* 交错延迟 - 3张卡片专用 */
.insight-card:nth-child(1) { animation-delay: 0.15s; }
.insight-card:nth-child(2) { animation-delay: 0.4s; }
.insight-card:nth-child(3) { animation-delay: 0.65s; }
/* 响应式微调（可选，根据需要打开） */
@media (max-width: 900px) {
.insight-card {
max-width: 100%;
}
}
</style>
</div>
本文来自博客园，作者：舒然，转载请注明原文链接：https://chuna2.787528.xyz/Jeffrey1172417122/p/19741946
浙公网安备 33010602011771号