feat: update homepage hero carousel images
This commit is contained in:
1 parent
e0be3225d6
commit
bd7fafce18
5 files changed
+23
-6
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
+23
-6
@@ -2523,15 +2523,32 @@ function HomePage() {
|
|||||||
const home = content.home;
|
const home = content.home;
|
||||||
const heroSlides = useMemo(
|
const heroSlides = useMemo(
|
||||||
() => [
|
() => [
|
||||||
'/client-assets/atlas-hero-waterfall.webp',
|
{
|
||||||
'/client-assets/hero-real-travelers.webp',
|
source: '/client-assets/home-hero-huangguoshu-hiker.webp',
|
||||||
'/client-assets/hero-miao-home-meal.webp',
|
alt: { zh: '黄果树瀑布前的贵州徒步旅行者', en: 'A traveler hiking in front of Huangguoshu Waterfall' },
|
||||||
|
position: 'center 52%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: '/client-assets/home-hero-waterfall-scale.webp',
|
||||||
|
alt: { zh: '贵州巨型瀑布前的旅行者', en: 'A traveler beneath a monumental Guizhou waterfall' },
|
||||||
|
position: 'center 57%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: '/client-assets/home-hero-mountain-village.webp',
|
||||||
|
alt: { zh: '贵州山谷中的传统村寨', en: 'A traditional village in a Guizhou mountain valley' },
|
||||||
|
position: 'center 50%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
source: '/client-assets/home-hero-cave-lanterns.webp',
|
||||||
|
alt: { zh: '贵州洞穴水面上的灯火与游船', en: 'Lantern light and boats inside a Guizhou cave' },
|
||||||
|
position: 'center 52%',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
[],
|
[],
|
||||||
);
|
);
|
||||||
const [heroIndex, setHeroIndex] = useState(0);
|
const [heroIndex, setHeroIndex] = useState(0);
|
||||||
const [heroPaused, setHeroPaused] = useState(false);
|
const [heroPaused, setHeroPaused] = useState(false);
|
||||||
const activeHero = heroSlides[heroIndex % heroSlides.length] || home.hero.imageUrl;
|
const activeHero = heroSlides[heroIndex % heroSlides.length];
|
||||||
|
|
||||||
useGSAP(
|
useGSAP(
|
||||||
() => {
|
() => {
|
||||||
@@ -2650,7 +2667,7 @@ function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<figure className="oc-atlas-hero-media">
|
<figure className="oc-atlas-hero-media">
|
||||||
<img key={activeHero} src={asset(activeHero)} alt={language === 'zh' ? '贵州瀑布秘境中的私家旅行' : 'A private journey through Guizhou waterfall country'} />
|
<img key={activeHero.source} src={asset(activeHero.source)} alt={activeHero.alt[language]} style={{ objectPosition: activeHero.position }} />
|
||||||
<figcaption>{pickText('贵州 · 中国西南', 'Guizhou · Southwest China', language)}</figcaption>
|
<figcaption>{pickText('贵州 · 中国西南', 'Guizhou · Southwest China', language)}</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
@@ -2671,7 +2688,7 @@ function HomePage() {
|
|||||||
aria-label={language === 'zh' ? `查看第 ${index + 1} 张首屏图` : `Show hero slide ${index + 1}`}
|
aria-label={language === 'zh' ? `查看第 ${index + 1} 张首屏图` : `Show hero slide ${index + 1}`}
|
||||||
aria-current={index === heroIndex ? 'true' : undefined}
|
aria-current={index === heroIndex ? 'true' : undefined}
|
||||||
onClick={() => setHeroIndex(index)}
|
onClick={() => setHeroIndex(index)}
|
||||||
key={slide}
|
key={slide.source}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
<button
|
<button
|
||||||
|
|||||||
Reference in new issue
Block a user