Creating a 3D Card Carousel using React JS 🎡🎢

Posted by

3D Card Carousel With React JS

/* 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 (

{cards.map((card, index) => (

this.handleCardClick(index)}
>

{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’));

0 0 votes
Article Rating
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@Luminous-
10 months ago

How to add infinite scrolling

@pepper1453
10 months ago

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.

@Md.SarwarJahan-shohid
10 months ago

Code please

@luqman6866
10 months ago

is it responsible on smartphones?

@Okami_16
10 months ago

Gg bro you deserve more likes

@ShubhamKumar-bn1do
10 months ago

Can I have a copy of your code for this?

This is very stylish and cool

@LuigiLugoMusic
10 months ago

Only in Java please

@CheapExoticBytes
10 months ago

Thanks for the source code Mate 👍👍🤗

@topfunnyvideo8673
10 months ago

if you can

@topfunnyvideo8673
10 months ago

where to html

@johncarlodigay36
10 months ago

can i have a copy of your code for this?
i really appreciate it thanks, your work is very impressive 😊