reactjs - 如何将垂直滚动添加到 reactstrap 轮播幻灯片内容

问题描述

我想在这个轮播中添加文章，但是当幻灯片内的内容超过固定长度时，它看起来像波纹管。

我现在已经对这些项目进行了硬编码。

import React, { Component } from 'react'
import { Container ,Row,Col,Carousel,
    CarouselItem,
    CarouselControl,
    CarouselIndicators,
    CarouselCaption} from 'reactstrap';

export class GeneratedComponent extends Component {
    constructor(props){
        super(props);
        this.state={
            activeIndex:0,
            animating:false,

        }
    }

    render() {
        let {animating,activeIndex}=this.state

        const next = () => {
            if (animating) return;
            const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
            this.setState({
                activeIndex:nextIndex
            })
            // setActiveIndex(nextIndex);
          }

          const previous = () => {
            if (animating) return;
            const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
            this.setState({
                activeIndex:nextIndex
            })
            // setActiveIndex(nextIndex);
          }

          const goToIndex = (newIndex) => {
            if (animating) return;
            this.setState({
                activeIndex:newIndex
            })
            // setActiveIndex(newIndex);
          }

        const items = [
            {
                id: 1,
                altText: 'Slide 1',
                caption: 'Slide 1 jghn kbn jk.bnm bkn/m cvgjhbknm.gchgvjhb.jn/jkvjbk cvkjlbhkjnkm cvhbjn cvghbkjnk cvjhbn cvbjn cvjhbkn vblnjkm vbhjknm cvbhn sxcvbsdfgj dgbhn tdfgh rfghj fghj esdfytugyhuj dfghkjl tydfghj dfghj dfghjkn tdfgyhj fghj rrdfghj rdtfgyh ccgvbhjn hbjkjnk gmhjvhbjn xchgvjhbknk etyfgvbhkjn zsxgcfhvb wretdryfugyiuh zrxtcvbh asdxcvgb zxcvb bjnkm lkfdj utd b gfdjytuyfughli sdrftyguhi 324w54e65r7t dxfcghvjb zxcvghbjn edfcvbhjn esrdftyg etrdytcfvbn lhkgjfhg yuktjydr stdryfgh xcfgvhbj zxcvbh j ytyuryr tdtfvbjn kblvjchxjgh xchvbn gfkhjg'
            },
            {
                id: 2,
                altText: 'Slide 2',
                caption: 'Slide 2'
            },
            {
                id: 3,
                altText: 'Slide 3',
                caption: 'Slide 3'
            }
        ];

          const slides = items.map((item) => {
            return (
                <CarouselItem
                    onExiting={() => this.setState({ animating: false })}
                    onExited={() => this.setState({ animating: false })}
                    className="custom-tag"
                    tag="div"
                    key={item.id}
                >
                    {/* <img src={item.src} alt={item.altText} /> */}
                    <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
                </CarouselItem>
            );
          });

        return (
            <div>
                <Container className="themed-container">
                    <Row xs="1" sm="2" md="2">
                        <Col>
                            <div>
                                <style>
                                    {
                                        `.custom-tag {
                                            max-width: 100%;
                                            height: 500px;
                                            background: grey;
                                        }`
                                    }
                                </style>
                                <Carousel
                                    activeIndex={activeIndex}
                                    next={next}
                                    previous={previous}
                                >
                                    <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
                                    {slides}
                                    <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
                                    <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
                                </Carousel>
                            </div>

                        </Col>
                        <Col>

                        </Col>
                    </Row>
                </Container>
            </div>
        )
    }
}
Carousel.defaultProps = { 
    indicators: true, // default: true
    controls: true, // default: true
    autoPlay: false, 
    interval: false
} 
export default GeneratedComponent

幻灯片需要可垂直滚动才能查看幻灯片中的所有内容。而且我不确定是否可以使用 reactstrap。请为此提出解决方法。任何帮助都会得到帮助。

标签： reactjscarouselreactstrap

reactjs - 如何将垂直滚动添加到 reactstrap 轮播幻灯片内容

问题描述

解决方案

推荐阅读