fix buttons slider
This commit is contained in:
@@ -3,6 +3,7 @@ import ArrowLeftIcon from './icons/ArrowLeftIcon';
|
||||
import ArrowRightIcon from './icons/ArrowRightIcon';
|
||||
import { dubaiMarinaSlider } from '../data/aboutDubaiMarina';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import Button from './ui/Button';
|
||||
|
||||
function Slider({
|
||||
categoryName,
|
||||
@@ -76,25 +77,33 @@ function Slider({
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className='flex items-center gap-[0.556vw] relative max-md:gap-[2.222vw]'>
|
||||
<div
|
||||
className='w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200'
|
||||
<Button
|
||||
variant='secondary'
|
||||
onlyIcon
|
||||
onClick={handlePreviousSlide}
|
||||
disabled={currentSlide === 0}
|
||||
className='disabled:!text-[#0D1922]/40 disabled:!bg-[#fff]/80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200'
|
||||
>
|
||||
<span className='w-5 h-5'>
|
||||
<ArrowLeftIcon />
|
||||
</span>
|
||||
</div>
|
||||
</Button>
|
||||
<div className='text-s text-white'>
|
||||
{currentSlide + 1}/{dubaiMarinaSlider[categoryName].length}
|
||||
</div>
|
||||
<div
|
||||
className='w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200'
|
||||
<Button
|
||||
variant='secondary'
|
||||
onlyIcon
|
||||
onClick={handleNextSlide}
|
||||
disabled={
|
||||
currentSlide === dubaiMarinaSlider[categoryName].length - 1
|
||||
}
|
||||
className='disabled:!text-[#0D1922]/40 disabled:!bg-[#fff]/80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200'
|
||||
>
|
||||
<span className='w-5 h-5'>
|
||||
<ArrowRightIcon />
|
||||
</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user