I am attempting to recreate netflix type of slide carousel ui utilizing this wds tutorial ( https://www.youtube.com/watch?v=yq4BeRtUHbk) for flick cast information making use of Reactjs and also going through a trouble.
I am bring information from moviedb data source and also attempting to attain netflix like slide carousel result.
the trouble is when i click switch for altering the slider index making use of getComputedStyle in css,
I obtain whole div recreated once again a number of times.
I Bring the information in the MovieDetails part and also pass it to MovieDetailsPage part
export default feature MovieDetails() {
const [MovieDetail, setMovieDetail] = useState([]).
const [CastDetails, setCastDetails] = useState([]).
const {id} = useParams();.
const API_Key='4ee812b6fb59e5f8fc44beff6b8647ed';.
console.log(' this is id', id);.
useEffect(() => > {
getDetail();.
getCastDetails();.
console.log(' major');.
}, https://stackoverflow.com/q/74758930).
const getDetail = useCallback(() => > {
bring(' https://api.themoviedb.org/3/movie/$ {id}? api_key=$ {API_Key} && language= en-US')
. after that( res => > res.json())
. after that( information => > {
console.log( information, 'information');.
setMovieDetail( information).
} ).
}, https://stackoverflow.com/q/74758930).
const getCastDetails = useCallback(() => > {
bring(' https://api.themoviedb.org/3/movie/$ {id}/ credits?api _ trick=$ {API_Key} && language= en-.
United States')
. after that( res => > res.json())
. after that( information => > {
setCastDetails( data.cast).
}
).
console.log(' obtain cast information made');.
}, https://stackoverflow.com/q/74758930).
useEffect(() => > {
console.log( MovieDetail, 'Moviedetils').
}, [MovieDetail]).
return (.
<< div>>.
<< MoviesDetailsPage {... MovieDetail} CastDetails= {CastDetails} API_Key= {API_Key}/>>.
<.
).
}
MovieDetailsPage.jsx
export default feature MoviesDetailsPage( {id, poster_path, backdrop_path, API_Key,.
CastDetails}) {
const API_image=" https://image.tmdb.org/t/p/w500/";
document.addEventListener(' click', e => > {
e.preventDefault();.
allow take care of;.
if( e.target.matches(". take care of")) {
take care of = e.target.
} else {
take care of = e.target.closest(". take care of").
}
if( take care of!= null) onHandleClick( take care of).
} ).
feature onHandleClick( take care of) {
const slider = handle.closest(". MovieCastContainer"). querySelector(". slider").
console.log( slider, 'sliderindex').
const sliderIndex = parseInt( getComputedStyle( slider). getPropertyValue("-- slider-index")).
if( handle.classList.contains(" left-handle")) {
slider.style.setProperty("-- slider-index", sliderIndex - 1).
}
if( handle.classList.contains(" right-handle")) {
slider.style.setProperty("-- slider-index", sliderIndex + 1).
}
}
const castInfo = CastDetails && & & CastDetails.map( information => <> < img src= {API_image+ data.profile _ course}
alt= {data.name}/>>).
console.log( CastDetails, 'Castdetails').
return (.
<< div className=" MovieDetailsPageCont">
<> < div className=" MovieDetailsContainer">
<> < div className=" headerImg"><> < img src= {API_image + backdrop_path}
alt=" backdrop_path" design= {{size: '100%', borderRadius: '10px'}}/><> .
<< div className=" movieid"> > {id} <.
<.
<< div className=" MovieCastContainer">
<> < switch className=" take care of left-handle">>.
<< div className=" message">&> &# 8249; .
<< div className=" slider">
> {
castInfo? castInfo: '... Filling'.
}
<.
<< switch className=" take care of right-handle">>.
<< div className=" message">&> &# 8250; .
<.
<.
).
}
My css web page where transform the slider index to transfrom to following collection of worths
*, *:: after, *:: prior to {
box-sizing: border-box;.
}
: origin {
-- slider-padding: 5rem;.
}
. MovieCastContainer {
display screen: flex;.
justify-content: facility;.
overflow: concealed;.
}
. slider {
-- slider-index: 0;.
display screen: flex;.
flex-grow: 1;.
margin: 0.25 rapid eye movement;.
change: translateX( calc( var(-- slider-index) * -100%));.
shift: change 250ms ease-in-out;.
}
. slider > > img {
flex: 0 0 25%;.
max-width: 25%;.
aspect-ratio: 16/ 9;.
cushioning:.25 rapid eye movement;.
border-radius: 1rem;.
overflow: concealed;.
}
. take care of {
boundary: none;.
border-radius: 1rem;.
flex-grow: 0;.
background-color: rgba( 0, 0, 0,.25);.
z-index: 10;.
margin:.25 rapid eye movement 0;.
cushioning: 0.5 rapid eye movement;.
arrow: tip;.
font-size: 5rem;.
display screen: flex;.
align-items: facility;.
justify-content: facility;.
shade: white;.
line-height: 0;.
shift: font-size 150ms ease-in-out;.
}
. left-handle {
border-top-left-radius: 0;.
border-bottom-left-radius: 0;.
}
. right-handle {
border-top-right-radius: 0;.
border-bottom-right-radius: 0;.
}
. take care of: float,
. take care of: emphasis {
background-color: rgba( 0, 0, 0,.5);.
}
. take care of: hover.text,
. take care of: focus.text {
change: range( 1.2 ).
}
Everytime I click following switch in ui the I obtain this
please if you can assist with this any kind of assistance would certainly be valued.
