Question

我正在尝试在我的网站上使用Carousel滑块，但所有图片都没有显示。我正在使用库提供的示例，但它不起作用。

我在我的HTML文件中链接了Bootstrap CDN，但它没有用。

import React, { Component } from 'react';
import {Carousel,} from 'react-bootstrap';
import Carousel from 'nuka-carousel';
class Slider extends Component {
    render() {
        return (
            <Carousel autoplay={true}>
                <img src="../asset/img1.jpg" />
                <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide2" />
                <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide3" />
                <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide4" />
                <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide5" />
                <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide6" />
            </Carousel>
        );
    }
}
export default Slider;

Answer 1

您正在使用来自2个不同图书馆的2个不同的旋转木马我确信这会导致一些问题。

删除import Carousel from 'nuka-carousel';

我会坚持使用react-bootstrap版本

安装包：npm install --save react-bootstrap

将样式表添加到HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

确保您正确导入它：

import {Carousel} from 'react-bootstrap';

来自实际react-bootstrap

的example

class ControlledCarousel extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      index: 0,
      direction: null
    };
  }

  handleSelect(selectedIndex, e) {
    alert(`selected=${selectedIndex}, direction=${e.direction}`);
    this.setState({
      index: selectedIndex,
      direction: e.direction
    });
  }

  render() {
    const { index, direction } = this.state;

    return (
      <Carousel
        activeIndex={index}
        direction={direction}
        onSelect={this.handleSelect}
      >
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="/carousel.png" />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="/carousel.png" />
          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="/carousel.png" />
          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>
              Praesent commodo cursus magna, vel scelerisque nisl consectetur.
            </p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    );
  }
}

render(<ControlledCarousel />);

图像不显示在ReactJS carousal滑块中

1 个答案: