I'm working on a photo slider, but an if statement doesn't work... I've got 2 if statement. One if statement works perfectly, while the other one does nothing.
Code:
import React, {useState} from "react"
export const Slideshow = () => {
const partners = ["/partners/logo_wp.jpg", "/partners/logo_van_leeuwen.png", "/partners/logo_kennelservices.png", "/partners/logo_beckhuis.jpg", "/partners/logo_kabeldirect.png", "/partners/logo_kremer.png"];
const [currentImage, setCurrentImage] = useState(0);
return (
<div style={{position: "relative"}}>
<div style={{
display: "flex",
transform: `translateX(-${currentImage * 100}%)`,
transition: "transform .25s ease"
}}>
{partners.map(partner => <div
style={{flexBasis: "33.333%", flexShrink: 0, display: "flex", justifyContent: "center"}}>
<img src={partner} style={{
height: '120px'
}}/>
</div>)}
</div>
{(() => {
if (!currentImage <= 0) {
return (
<button className={'prev-photo'}
style={{position: "absolute", left: 0, top: "50%", transform: 'scale(2)'}}
onClick={() => setCurrentImage(currentImage - 1)}><
</button>
)
}
})()}
{(() => {
if (!currentImage >= partners.length) {
return (
<button className={'next-photo'}
style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
onClick={() => setCurrentImage(currentImage + 1)}>></button>
)
}
})}
<div style={{textAlign: 'center'}}>
{(currentImage + 1) + '/' + partners.length}
</div>
</div>
)
};
Here you've my code. The last if statement does nothing. I hope someone can figure out where the error occurs. Thank you in advance.
Hi this answer works
see the code live :
https://codesandbox.io/s/gallant-mountain-18yu8?fontsize=14&hidenavigation=1&theme=dark
you need to add ()
to the end of the JSX function for the right arrow
also use this conditions instead
if (currentImage < partners.length-1) {
and
if (currentImage > 0) {
When you do not export your component as default you can not default import it. either you can import it as;
import {SlideShow} from 'SlideShow';
Or export it as default
const Slideshow = () => {
const partners = ["/partners/logo_wp.jpg", "/partners/logo_van_leeuwen.png", "/partners/logo_kennelservices.png", "/partners/logo_beckhuis.jpg", "/partners/logo_kabeldirect.png", "/partners/logo_kremer.png"];
const [currentImage, setCurrentImage] = useState(0);
return (
<div style={{position: "relative"}}>
<div style={{
display: "flex",
transform: `translateX(-${currentImage * 100}%)`,
transition: "transform .25s ease"
}}>
{partners.map(partner => <div
style={{flexBasis: "33.333%", flexShrink: 0, display: "flex", justifyContent: "center"}}>
<img src={partner} style={{
height: '120px'
}}/>
</div>)}
</div>
{(() => {
if (!currentImage <= 0) {
return (
<button className={'prev-photo'}
style={{position: "absolute", left: 0, top: "50%", transform: 'scale(2)'}}
onClick={() => setCurrentImage(currentImage - 1)}><
</button>
)
}
})()}
{(() => {
if (!currentImage >= partners.length) {
return (
<button className={'next-photo'}
style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
onClick={() => setCurrentImage(currentImage + 1)}>></button>
)
}
})}
<div style={{textAlign: 'center'}}>
{(currentImage + 1) + '/' + partners.length}
</div>
</div>
)
};
export default Slideshow;
Also, if currentImage starts from 0. then you have to modify your condition as
(!currentImage > partners.length)
It appears you are not executing the function containing the second if
statement.
Try to add a ()
at the end, such that it becomes
{(() => {
if (!currentImage >= partners.length) {
return (
<button className={'next-photo'}
style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
onClick={() => setCurrentImage(currentImage + 1)}>></button>
)
}
})()}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.