Я хочу добавить статьи в эту карусель, но когда содержимое внутри слайда превышает фиксированную длину, оно выглядит следующим образом.
I На данный момент элементы жестко закодированы.
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
Слайд необходимо прокручивать по вертикали, чтобы можно было просматривать все содержимое слайда. И я не уверен, возможно ли это с использованием responsestrap. Пожалуйста, предложите обходной путь для этого. Любая помощь ценится.