viktor/wrongmove
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add prev/next arrow buttons to photo carousel

Browse source
This commit is contained in:
Viktor Barzin 2026-02-21 21:07:17 +00:00
parent 15dbcfa332
commit 9c954c0e43
No known key found for this signature in database
GPG key ID: 0EB088298288D958
1 changed files with 20 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/components/PhotoCarousel.tsx
View file

@ -1,5 +1,6 @@
import { useState, useCallback, useEffect } from 'react'; import { useState, useCallback, useEffect } from 'react';
import useEmblaCarousel from 'embla-carousel-react'; import useEmblaCarousel from 'embla-carousel-react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import type { ListingDetailPhoto } from '@/types'; import type { ListingDetailPhoto } from '@/types';
interface PhotoCarouselProps { interface PhotoCarouselProps {
@ -45,6 +46,25 @@ export function PhotoCarousel({ photos }: PhotoCarouselProps) {
))} ))}
</div> </div>
</div> </div>
{/* Prev/Next arrows */}
{photos.length > 1 && (
<>
<button
className="absolute left-1 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white rounded-full p-1 transition-colors"
onClick={() => emblaApi?.scrollPrev()}
aria-label="Previous photo"
>
<ChevronLeft className="w-5 h-5" />
</button>
<button
className="absolute right-1 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white rounded-full p-1 transition-colors"
onClick={() => emblaApi?.scrollNext()}
aria-label="Next photo"
>
<ChevronRight className="w-5 h-5" />
</button>
</>
)}
{/* Counter */} {/* Counter */}
<div className="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded"> <div className="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded">
{selectedIndex + 1} / {photos.length} {selectedIndex + 1} / {photos.length}