Reactstrap

Question

我正在尝试让我的 Reactstrap 旋转木马的标题出现在图像的右侧，但仍在旋转木马中。目前，测试出现在图像上，就像文档中提供的示例一样。

我的 JS：

render() {
  const { activeIndex } = this.state;

  const slides = items.map((item) => {
    return (
      <CarouselItem
        onExiting={this.onExiting}
        onExited={this.onExited}
        key={item.src}
      >

        <div className='ImgCont'>
          <img width='100%' src={item.src} alt={item.altText} />
        </div>
        <div className='TextCont'>
          <CarouselCaption captionHeader={item.header}  captionText={item.caption}  />
        </div>
      </CarouselItem>
    );
  });

render() {
  <div className='TrustedMechs'>
    <Carousel
      className='trustedMechCarousel'
      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>
});

我的CSS:

.TrustedMechs{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4%;
  width: 100%;
}

.trustedMechCarousel{
  width: 50%;
  height: 100%;
}

.ImgCont{
  float: left !important;
}

.TextCont{
  float: right !important;
}

Answer 1

我想通了。我的代码如下：

JavaScript:

import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption } from 'reactstrap';

const items = [
  {
     src: ./path/to/image,
     altText: 'Image alt Text',
     header: 'Heading',
     caption: 'Content here'
  },
  {
     src: ./path/to/image,
     altText: 'Image alt Text',
     header: 'Heading',
     caption: 'Content here'
  },
  {
     src: ./path/to/image,
     altText: 'Image alt Text',
     header: 'Heading',
     caption: 'Content here'
  }
];

class CarouselExample 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 slides = items.map((item) => {

    return (
      <CarouselItem
        onExiting={this.onExiting}
        onExited={this.onExited}
        key={item.src}
      >

        <div className='carouselCont'>
          <div className='ImgCont'>
            <img width='100%' src={item.src} alt={item.altText} />
          </div>
          <div className='TextCont'>
            <CarouselCaption captionHeader={item.header}  captionText={item.caption}  />
          </div>
        </div>
      </CarouselItem>
      );
    });

    return (
      <div>
        <Carousel className='trustedMechCarousel' 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>
    );
  }
}

export default CarouselExample ;

CSS如下：

.trustedMechCarousel{
  width: 100%;
  height: 100%;
}

.carouselCont{
  background-color: #f1f2ed;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}

.ImgCont{
  float: left !important;
  width: 50%;
}

.TextCont{
  padding: 1% !important;
  position: relative;
  height: 50%;
  right: 4%;
  width: 50%;
  font-size: 25px;
}

.carousel-caption{
  position: relative !important;
  top: 0 !important;
  height: 100% !important;
  width: 75% !important;
}

.TextCont p{
  color: black !important;
}

.TextCont h3{
  color: black !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  background-image: none;
}

.carousel-control-next-icon:after{
  content: '>';
  font-size: 55px;
  color: black;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: white;
}

这是我的轮播。使用自定义控件图标是因为默认图标妨碍了文本。

Reactstrap - 图片右侧的旋转木马标题

Reactstrap - Carousel caption to right of image

carousel

reactjs