How to add vertical scrolling to reactstrap carousel slide content

Question

I want to add articles in this carousel, but when the content inside the slide exceeds the fixed length it looks like bellow.

I have hardcoded the items for now.

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

The slide needs to be scrollable vertically to be able to view all the contents in the slide. And I'm not sure whether that's possible using reactstrap. Please suggest a workaround for this. Any help is appriciated.

Answer 1

Add a vertical scroll style for your component CarouselItem

overflow-y: scroll;

---

Ref: CSS overflow-y Property