ответная загрузка Carousel.js - PullRequest
Новая
       9

ответная загрузка Carousel.js

0 голосов
/ 29 апреля 2018

Я написал простой файл .js, использующий библиотеку реагирования-bootstrap Carousel.js для создания неконтролируемой карусели, но изображения вместо того, чтобы быть слайдом, идут один за другим вертикально. Размещаем код ниже. Можете ли вы помочь с отладкой так же. 

App.jsx
-----------

import React, { Component } from 'react';

import './App.css';

import writing from './writing.jpg' ;
import grammer from './grammer.jpg' ;
import listening from './listening.jpg' ;
import reading from './reading.jpg' ;

import {Carousel}  from 'react-bootstrap';

class App extends Component {
  constructor(props, context) {
    super(props, context);

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

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

          <Carousel controls={false} >

          <Carousel.Item >

             <img src={grammer} alt="grammer" width={300} height={100} />
          </Carousel.Item>

          <Carousel.Item>
             <img src={listening} alt="listen" width={300} height={100} />
          </Carousel.Item>


          <Carousel.Item>
             <img width={300} height={100} alt="reading" src={reading} />

          </Carousel.Item>

              <Carousel.Item>
             <img width={300} height={100} alt="reading" src={writing} />

          </Carousel.Item>

          </Carousel>

    );
  }
}

export default App;



Index.js
----------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();


and under index.html I have element below:

 <div id="root"></div>

Итак, после запуска этого кода изображения загружаются на страницу, но поведение карусели не работает.

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

FYI с bootstrap-4-react вам не нужно добавлять CSS-файлы самостоятельно. https://bootstrap -4-react.com / # документация / компоненты / карусельного

0 голосов
/ 17 сентября 2018

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

В моем случае изображения карусели были выровнены по вертикали, потому что я не правильно включил таблицы стилей начальной загрузки. Вот шаги, которые я выполнил:

1. Перейти к https://react -bootstrap.github.io / Начало работы / Введение /

2. найдите новейшие таблицы стилей и скопируйте их в буфер обмена. Последние выпуски на эту дату: 

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

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

3. вставьте их в <head> часть вашего index.html файла. Теперь, если вы сохраните все и перезагрузите свое приложение реакции, это должно быть хорошо.

Надеюсь, это поможет любому, у кого возникнет та же проблема!

...