Hello everyone,
I am building a website using react js. Now I want to display three mdbootstrap cascading cards inline using react js.
Here a screenshot
Belove the code: (please note that on this page there is a navbar, video carousel, the cascading cards and a footer).
import React, { Component } from 'react';
import { Container, CarouselIndicator, Row, Col, CardTitle, CardText, CardBody, CardImage, Button, Card, CarouselIndicators, Carousel, CarouselControl, CarouselInner, CarouselItem } from 'mdbreact';
export default class Home extends Component {
constructor(props) {
super(props);
this.next = this.next.bind(this);
this.prev = this.prev.bind(this);
this.state = {
activeItem: 1,
maxLength: 3
};
}
next() {
const nextItem = this.state.activeItem + 1;
if(nextItem > this.state.maxLength) {
this.setState({ activeItem: 1 });
} else {
this.setState({ activeItem: nextItem });
}
}
prev() {
const prevItem = this.state.activeItem - 1;
if(prevItem < 1) {
this.setState({ activeItem: this.state.maxLength });
} else {
this.setState({ activeItem: prevItem });
}
}
goToIndex(item) {
if (this.state.activeItem !== item) {
this.setState({
activeItem: item
});
}
}
render(){
const { activeItem } = this.state;
return(
<div>
<Carousel
activeItem={this.state.activeItem}
next={this.next}
className="z-depth-1">
<CarouselInner>
<CarouselItem itemId="1">
<video className="video-fluid d-block" autoPlay loop>
<source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" />
</video>
</CarouselItem>
<CarouselItem itemId="2">
<video className="video-fluid d-block" autoPlay loop>
<source src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4" />
</video>
</CarouselItem>
<CarouselItem itemId="3">
<video className="video-fluid d-block" autoPlay loop>
<source src="https://mdbootstrap.com/img/video/Agua-natural.mp4" type="video/mp4" />
</video>
</CarouselItem>
</CarouselInner>
<CarouselControl direction="prev" role="button" onClick={() => { this.prev(); }} />
<CarouselControl direction="next" role="button" onClick={() => { this.next(); }} />
</Carousel>
<Container>
<h4 className="mt-5 mb-2">Multi-item Carousel</h4>
<Carousel
multiItem
activeItem={this.state.activeItem}
next={this.next}>
<div className="controls-top">
<CarouselControl iconLeft className="btn-floating" direction="prev" role="button" onClick={() => { this.prev(); }} />
<CarouselControl iconRight className="btn-floating" direction="next" role="button" onClick={() => { this.next(); }} />
</div>
<CarouselIndicators>
<CarouselIndicator active={activeItem === 1 ? true : false} onClick={() => { this.goToIndex(1); }}></CarouselIndicator>
<CarouselIndicator active={activeItem === 2 ? true : false} onClick={() => { this.goToIndex(2); }}></CarouselIndicator>
<CarouselIndicator active={activeItem === 3 ? true : false} onClick={() => { this.goToIndex(3); }}></CarouselIndicator>
</CarouselIndicators>
<CarouselInner>
<Row>
<CarouselItem itemId="1">
<Col md="4">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
</CarouselItem>
<CarouselItem itemId="2">
<Col md="4">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(60).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
</CarouselItem>
<CarouselItem itemId="3">
<Col md="4">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(53).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
<Col md="4" className="clearfix d-none d-md-block">
<Card className="mb-2">
<CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(41).jpg" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</Col>
</CarouselItem>
</Row>
</CarouselInner>
</Carousel>
</Container>
</div>
);
}
}Could someone please help me?
Thanks,
Nico
