responsestrap carousel-caption не отображается в меньших представлениях - PullRequest
Новая
       93

responsestrap carousel-caption не отображается в меньших представлениях

1 голос
/ 02 августа 2020 

import React, { useState } from 'react';
import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption,
  Button
} from 'reactstrap';

const items = [
    {
      src: 'https://images.unsplash.com/photo-1542816417-0983c9c9ad53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
      altText: "slide 3",
      caption: <a href=''><Button color="info">Donate</Button></a>,
      quote: <span>“Those who spend in charity will be richly rewarded.”</span>
    },
    {
      src: require('../images/slide-two.jpeg'),
      altText: 'Slide 2',
      caption: <a href=""><Button color="info">Donate</Button></a>
    },
    {
      src: 'https://previews.123rf.com/images/sufi70/sufi701302/sufi70130200041/18047770-arabic-calligraphy-on-the-ceiling-of-selimiye-mosque-in-edirne-turkey.jpg',
      altText: 'Slide 3',
      caption: <a href=''><Button color="info">Donate</Button></a>
    }
  ];

const Example = (props) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [animating, setAnimating] = useState(false);

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

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

  const goToIndex = (newIndex) => {
    if (animating) return;
    setActiveIndex(newIndex);
  }

  const slides = items.map((item) => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={item.src}
      >
        <img src={item.src} alt={item.altText} />
        <CarouselCaption captionText={item.quote} className='mb-5 name'/>
         <CarouselCaption captionText={item.caption}  />
      </CarouselItem>
    );
  });

  return (
    <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>
  );
}

export default Example;

У меня проблемы с отображением текста заголовка карусели в уменьшенных окнах. Кажется, что он появляется на средних и высоких просмотрах, но исчезает в меньших. Я попытался провести небольшое исследование, но не смог найти никого с подобной проблемой, и если бы я нашел, у них не было ответа.

Как я могу это исправить?

...