Aimpress/Shumiland
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

feat(hero): change HeroSlider transition from vertical to horizontal
Some checks are pending
CI / Type Check (push) Waiting to run
Details
CI / Lint (push) Waiting to run
Details
CI / Unit Tests (push) Waiting to run
Details
Deploy / Build & Push Image (push) Waiting to run
Details
Deploy / Deploy to VPS (push) Blocked by required conditions
Details

Browse source 
Track now translates on X axis; nav dots unified to bottom row on all breakpoints.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-06-10 14:01:00 +01:00
parent 0ab98cdd3a
commit ffe76e9e2b
1 changed files with 8 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/sections/HeroSlider.tsx
View file

@ -110,20 +110,20 @@ export function HeroSlider({ slides: slidesProp }: { slides?: SlideData[] }) {
onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)}
>
{/* ── Slides track — vertical ── */}
{/* ── Slides track — horizontal ── */}
<div
className="absolute inset-x-0 top-0 will-change-transform"
className="absolute inset-y-0 left-0 will-change-transform"
style={{
height: `${slides.length * 100}%`,
transform: `translateY(-${(current / slides.length) * 100}%)`,
width: `${slides.length * 100}%`,
transform: `translateX(-${(current / slides.length) * 100}%)`,
transition: 'transform 0.85s cubic-bezier(0.77,0,0.18,1)',
}}
>
{slides.map((s, i) => (
<div
key={i}
className="absolute inset-x-0"
style={{ top: `${(i / slides.length) * 100}%`, height: `${100 / slides.length}%` }}
className="absolute inset-y-0"
style={{ left: `${(i / slides.length) * 100}%`, width: `${100 / slides.length}%` }}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
@ -221,30 +221,8 @@ export function HeroSlider({ slides: slidesProp }: { slides?: SlideData[] }) {
</div>
</div>
{/* ── Vertical nav dots (desktop) ── */}
<div className="absolute top-1/2 right-5 z-30 hidden -translate-y-1/2 flex-col gap-3 lg:flex">
{slides.map((_, i) => (
<button
key={i}
aria-label={`Слайд ${i + 1}`}
onClick={() => goTo(i)}
className="flex h-8 w-8 items-center justify-center"
>
<span
className="block rounded-full transition-all duration-300"
style={{
width: i === current ? 10 : 6,
height: i === current ? 10 : 6,
backgroundColor: i === current ? '#f28b4a' : 'rgba(255,255,255,0.55)',
boxShadow: i === current ? '0 0 0 2px rgba(242,139,74,0.4)' : 'none',
}}
/>
</button>
))}
</div>
{/* ── Mobile dots (bottom) ── */}
<div className="absolute bottom-4 left-1/2 z-30 flex -translate-x-1/2 gap-2 lg:hidden">
{/* ── Nav dots (bottom, all breakpoints) ── */}
<div className="absolute bottom-5 left-1/2 z-30 flex -translate-x-1/2 gap-2 lg:bottom-6 lg:gap-3">
{slides.map((_, i) => (
<button
key={i}