/* CSS for the 3D card carousel */
.carousel {
perspective: 1000px;
}
.carousel__inner {
display: flex;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.carousel__item {
flex: 0 0 300px;
margin-right: 20px;
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
transform-origin: center;
transition: transform 0.5s;
}
.carousel__item:last-child {
margin-right: 0;
}
.carousel__item.active {
transform: translateZ(50px);
}
3D Card Carousel With React JS
// React component for the 3D card carousel
class CardCarousel extends React.Component {
constructor(props) {
super(props);
this.state = {
activeIndex: 0
};
}
handleCardClick = (index) => {
this.setState({ activeIndex: index });
}
render() {
const { activeIndex } = this.state;
const { cards } = this.props;
return (
>
{card.title}
{card.description}
))}
);
}
}
// Create a list of cards
const cards = [
{ title: ‘Card 1’, description: ‘This is the description for card 1’ },
{ title: ‘Card 2’, description: ‘This is the description for card 2’ },
{ title: ‘Card 3’, description: ‘This is the description for card 3’ },
{ title: ‘Card 4’, description: ‘This is the description for card 4’ },
{ title: ‘Card 5’, description: ‘This is the description for card 5’ }
];
// Render the CardCarousel component
ReactDOM.render(, document.getElementById(‘root’));
How to add infinite scrolling
Thank you. This is honestly a great solution. I updated it to make it vertical, and replaced the cards with my own custom components in ReactJS. The code was clean that updating it was easy. Great work.
Code please
is it responsible on smartphones?
Gg bro you deserve more likes
Can I have a copy of your code for this?
This is very stylish and cool
Only in Java please
Thanks for the source code Mate 👍👍🤗
if you can
where to html
can i have a copy of your code for this?
i really appreciate it thanks, your work is very impressive 😊