I've been working on a slide carousel and it's almost complete, but I'm facing an issue with adjusting the arrows to the images.
When testing the website for responsiveness, I noticed that the div inside the flexbox stops shrinking and remains in one position. While this may look okay due to overflow: hidden, the arrows stay static in position and end up disappearing.
The challenge lies in making sure that the arrows are still accessible even when the website is viewed at smaller resolutions.
I hope I have provided enough detail about the problem.
CSS:
.header{
display: flex;
position: relative;
justify-content: center;
align-items: center;
flex-basis: 100%;
height: 40vh;
border-color: white;
overflow: hidden;
}
.header__box{
}
.right-arrow{
position: relative;
bottom: 350px;
left: 900px;
font-size: 2rem;
color: #000;
z-index: 10;
cursor: pointer;
user-select: none;
}
.left-arrow{
position: relative;
bottom: 350px;
left: 80px;
font-size: 2rem;
color: #000;
z-index: 10;
cursor: pointer;
user-select: none;
}
.slide{
opacity: 0;
transition-duration: 1s;
transform: scale(1.00);
}
.slide.active{
display: flex;
flex-basis: 100%;
opacity: 1;
transition-duration: 1s;
transform: scale(1.00);
}
.image{
}
Code:
import React, {useState} from 'react';
import './Header.css';
import {HeaderData} from './HeaderData'
import {FaArrowAltCircleRight, FaArrowAltCircleLeft} from 'react-icons/fa'
const Header = ({slides}) => {
const [current, setCurrent] = useState(0)
const length = slides.length
const nextSlide = () => {
setCurrent(current === length - 1 ? 0 : current + 1)
}
const prevSlide = () => {
setCurrent(current === 0? length -1 : current -1 )
}
console.log(current)
return (
<div className='header'>
<div className='header__box'>
{HeaderData.map((slide, index) => {
return (
<div className={index === current? 'slide active' : 'slide'}>
{index === current ? <img src={slide.image} className='image' alt='shoe photo'/> : null}
</div>
)
})}
<FaArrowAltCircleLeft className='left-arrow' onClick={prevSlide}/>
<FaArrowAltCircleRight className='right-arrow' onClick={nextSlide}/>
</div>
</div>
)
}
export default Header;