Модуль Owl Carousel npm не работает в реакции - PullRequest
Новая
       10

Модуль Owl Carousel npm не работает в реакции

0 голосов
/ 10 января 2019

Я работаю над приложениемactjs и использую модуль npm для совы, чтобы показать некоторые данные.

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

import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

и ниже - метод визуализации 

 render() {
    const options = { 
        nav: true,
        navText:["<div className='nav-btn prev-slide'></div>","<div className='nav-btn next-slide'></div>"],
        rewind: false,
        autoplay: true,
        slideBy: 1,
        dots: true,
        dotsEach: true,
        dotData: true
      };
      if(!this.state.response) return(<div>Loading...</div>);
      return (
          <div className="container">
          <div className="PageHeading">
            <div className="row">
              <div className="col-md-8 col-sm-8 col-xs-12"><h4>Latest Published</h4></div>
              <div className="col-md-4 col-sm-4 col-xs-12 text-right"><Link to="/">View All&nbsp;<i className="arrow_carrot-right"></i></Link></div></div>
              </div>
              <br />
             <OwlCarousel ref="gallery" margin={15} loop autoplay={true} items={6}  options={options}>
                {
                    this.state.response.map((obj,key)=>
                    <div className="" key={key}>
                    <div className="subcategories_blockCard"> 
                    <Link to={'/book/'+obj.book_title.split(' ').join('-')}>
                        <img src={'http://localhost:3001/'+obj.book_cover} style={{'width':'100%'}} title={obj.book_title}/>
                        {/* <div className="card-content">{obj.book_title}</div> */}
                        </Link>
                    </div>
                </div>
                    )
                }

            </OwlCarousel>
          </div>

        )
  }

Теперь проблема в том, что при запуске приложения элементы карусели не видны, и когда я нажимаю на любую ссылку, содержащую корневой путь http://localhost:3000/ (предположим, что логотип приложения содержит href http://localhost:3000/, а при нажатии на логотип, который <a href="http://localhost:3000"><img src="logo.png /></a>), тогда на странице появится карусель.

Я не знаю, как это исправить, Пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 13 января 2019

Полагаю, ваша проблема в том, что вы не используете setState для изменения состояния.

...