fix hero
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import hero1 from "@/public/hero1.png";
|
||||
import hero2 from "@/public/hero2.png";
|
||||
import hero3 from "@/public/hero3.png";
|
||||
@@ -17,10 +16,6 @@ function Hero() {
|
||||
setCurrentIndex((prevIndex) => (prevIndex + 1) % heroImages.length);
|
||||
}, []);
|
||||
|
||||
const prevSlide = () => {
|
||||
setCurrentIndex((prevIndex) => (prevIndex - 1 + heroImages.length) % heroImages.length);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
nextSlide();
|
||||
@@ -57,35 +52,6 @@ function Hero() {
|
||||
Asztalfoglalás
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 z-10">
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-black/30 p-2 text-white transition hover:bg-black/50"
|
||||
aria-label="Előző dia"
|
||||
>
|
||||
<ChevronLeft size={32} />
|
||||
</button>
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-black/30 p-2 text-white transition hover:bg-black/50"
|
||||
aria-label="Következő dia"
|
||||
>
|
||||
<ChevronRight size={32} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-8 left-1/2 z-10 flex -translate-x-1/2 space-x-3">
|
||||
{heroImages.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentIndex(index)}
|
||||
className={`h-3 w-3 rounded-full transition-colors ${currentIndex === index ? 'bg-amber-400' : 'bg-white/50 hover:bg-white/75'
|
||||
}`}
|
||||
aria-label={`Ugrás a(z) ${index + 1}. diára`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user