ChengXiao
KPCKevin Powell - Community
•Created by ChengXiao on 10/7/2023 in #front-end
Warning: Invalid hook call. Hooks can only be called in of the body of a function component.…
6 replies
KPCKevin Powell - Community
•Created by ChengXiao on 10/7/2023 in #front-end
Warning: Invalid hook call. Hooks can only be called in of the body of a function component.…
6 replies
KPCKevin Powell - Community
•Created by ChengXiao on 7/9/2023 in #front-end
React text rendering issue
It’s working tysm 🫶
18 replies
KPCKevin Powell - Community
•Created by ChengXiao on 7/9/2023 in #front-end
React text rendering issue
18 replies
KPCKevin Powell - Community
•Created by ChengXiao on 7/9/2023 in #front-end
React text rendering issue
Srry 😅
18 replies
KPCKevin Powell - Community
•Created by ChengXiao on 7/9/2023 in #front-end
React text rendering issue
18 replies
KPCKevin Powell - Community
•Created by ChengXiao on 7/9/2023 in #front-end
React text rendering issue
import slide1 from "./assets/slide-01.jpg";
import slide2 from "./assets/slide-02.jpg";
import slide3 from "./assets/slide-03.jpg";
export const MAINSLIDE = [
{
id: 11,
image: slide1,
title: "Elden Ring",
titleStyle: ["animatefadeInUp", "animatefadeOut"],
titleActive: "animatefadeInUp",
available: "Available ON PS5",
availableStyle: ["animatefadeInDown", "animatefadeOut"],
availableActive: "animatefadeInDown",
btn: "Get Now",
btnStyle: ["animatezoomIn", "animatefadeOut"],
btnActive: "animatezoomIn",
},
{
id: 22,
image: slide2,
title: "The Last of Us Part 2",
titleStyle: ["animatelightSpeedInRight", "animatefadeOut"],
titleActive: "animatelightSpeedInRight",
available: "Available Now",
availableStyle: ["animaterollIn", "animatefadeOut"],
availableActive: "animaterollIn",
btn: "Get Now",
btnStyle: ["animatefadeInUpBig", "animatefadeOut"],
btnActive: "animatefadeInUpBig",
},
{
id: 33,
image: slide3,
title: "Nier:Automata",
titleStyle: ["animaterotateInUpRight", "animatefadeOut"],
titleActive: "animaterotateInUpRight",
available: "Top Rated",
availableStyle: ["animaterotateInDownLeft", "animatefadeOut"],
availableActive: "animaterotateInDownLeft",
btn: "Get Now",
btnStyle: ["animaterotateIn", "animatefadeOut"],
btnActive: "animate__rotateIn",
},
];
18 replies
KPCKevin Powell - Community
•Created by ChengXiao on 7/9/2023 in #front-end
React text rendering issue
{data.map((item, index) => {
return (
<div className={index === activeIndex ? "slides active" : "slides"}>
<img src={item.image} alt="img" key={index.id} />
</div>
);
})}
{data.map((info, index) => {
return (
<div className="slide-info">
<h4
className={
index === activeIndex
? info.availableActive
: info.availableStyle
}
>
{info.available}
</h4>
<h3
className={
index === activeIndex ? info.titleActive : info.titleStyle
}
>
{info.title}
</h3>
<button
className={index === activeIndex ? info.btnActive : info.btnStyle}
>
{info.btn}
</button>
</div>
);
})}
<div className="cloud-bg">
<img src={cloud1} alt="cloud" style={{ "--i": "1" }} />
<img src={cloud2} alt="cloud" style={{ "--i": "2" }} />
<img src={cloud3} alt="cloud" style={{ "--i": "3" }} />
<img src={cloud4} alt="cloud" style={{ "--i": "4" }} />
<img src={cloud5} alt="cloud" style={{ "--i": "5" }} />
</div>
</div>
);
};
export default SliderCard;
18 replies
KPCKevin Powell - Community
•Created by ChengXiao on 7/9/2023 in #front-end
React text rendering issue
18 replies
KPCKevin Powell - Community
•Created by ChengXiao on 6/27/2023 in #front-end
not showing on android device
I try on different browser and it’s working ❤️
4 replies
KPCKevin Powell - Community
•Created by ChengXiao on 6/27/2023 in #front-end
not showing on android device
Hmm i’ll try tysm for ur answer. Have a nice day
4 replies
KPCKevin Powell - Community
•Created by ChengXiao on 1/30/2023 in #front-end
Question About Responsive
Link to this website
https://www.monstercat.com/release/MCLP017
4 replies