reactstrap Carousel card

project site: http://chuanshuoge1.github.io/reactstrap

js

import React, { Component } from 'react';

import {

    Carousel,

    CarouselItem,

    CarouselControl,

    CarouselIndicators,

    CarouselCaption,

    Row, Col

} from 'reactstrap';

import {

    Card, CardImg, CardText, CardBody, CardLink,

    CardTitle, CardSubtitle

} from 'reactstrap';

export const Home = () => (

    <div>

        <h1>Welcome to the Bob's Website!</h1>

        <MyCarousel />

        {MyCard()}

    </div>

)

const items = [

    {

        id: 1,

        altText: '',

        caption: '',

        src: 'https://github.com/chuanshuoge1/reactstrap/blob/gh-pages/image/1.png?raw=true'

    },

    {

        id: 2,

        altText: '',

        caption: '',

        src: 'https://github.com/chuanshuoge1/reactstrap/blob/gh-pages/image/2.png?raw=true'

    },

    {

        id: 3,

        altText: '',

        caption: '',

        src: 'https://github.com/chuanshuoge1/reactstrap/blob/gh-pages/image/3.png?raw=true'

    }

];

class MyCarousel extends Component {

    constructor(props) {

        super(props);

        this.state = { activeIndex: 0 };

        this.next = this.next.bind(this);

        this.previous = this.previous.bind(this);

        this.goToIndex = this.goToIndex.bind(this);

        this.onExiting = this.onExiting.bind(this);

        this.onExited = this.onExited.bind(this);

    }

    onExiting() {

        this.animating = true;

    }

    onExited() {

        this.animating = false;

    }

    next() {

        if (this.animating) return;

        const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;

        this.setState({ activeIndex: nextIndex });

    }

    previous() {

        if (this.animating) return;

        const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;

        this.setState({ activeIndex: nextIndex });

    }

    goToIndex(newIndex) {

        if (this.animating) return;

        this.setState({ activeIndex: newIndex });

    }

    render() {

        const { activeIndex } = this.state;

        const marginLeft = (window.innerWidth / 2 - 150).toString() + 'px';

        const slides = items.map((item) => {

            return (

                <CarouselItem

                    className="my-Carousel"

                    tag="div"

                    key={item.id}

                    onExiting={this.onExiting}

                    onExited={this.onExited}

                >

                    <a href="https://www.tsn.ca/soccer" target="_blank">

                        <img className="my-CarouselImage" style={{ marginLeft: marginLeft }}

                            src={item.src} alt={item.altText} />

                    </a>

                </CarouselItem>

            );

        });

        return (

            <div>

                <Carousel

                    activeIndex={activeIndex}

                    next={this.next}

                    previous={this.previous}

                >

                    <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />

                    {slides}

                    <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />

                    <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />

                </Carousel>

            </div>

        );

    }

}

const MyCard = () => {

    return (

        <div>

            <Row>

                <Col sm={{ size: 6, offset: 3 }}>

                    <Card style={{ backgroundColor: 'lightgrey', borderColor: '#555' }}>

                        <CardBody>

                            <CardTitle>Bob's Blog</CardTitle>

                        </CardBody>

                        <img src="https://github.com/chuanshuoge1/reactstrap/blob/gh-pages/image/4.png?raw=true" alt="blog" />

                        <CardBody>

                            <CardText>Blog links:</CardText>

                            <CardLink href="http://chuanshuoge2.blogspot.com/">blog1</CardLink>

                            <CardLink href="http://chuanshuoge1.blogspot.com/">blog2</CardLink>

                        </CardBody>

                    </Card>

                </Col>

            </Row>

        </div>

    );

};

-------------------------------------------------

css

.my-Carousel {

    max-width: 100%;

    height:300px;

    background: black;

}

.my-CarouselImage {

    height:300px;

}

reference:
https://reactstrap.github.io/components/carousel/
https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
https://stackoverflow.com/questions/39066671/react-update-component-margin-top-with-jquery