0

Olá, tenho o seguinte codigo:

import React from 'react'

// Importanto Imagens
import bgimage from '../images/bgimage_m.jpg'
import person_1 from '../images/person_1.jpg'

const Clientes = props => {

    return (
        <div>
            <div className='site-blocks-cover overlay' data-aos='fade' data-stellar-background-ratio='0.5'
                style={{
                    backgroundImage: 'url(' + bgimage + ')',
                }}
            >
                <div className='container'>
                    <div className='row align-items-center'>
                        <div className='col-md-10'>
                            <span className='sub-text'>Clientes Felizes</span>
                            <h1>Depoimentos</h1>
                        </div>
                    </div>
                </div>
            </div>

            <div className='container site-section block-13 testimonial-wrap'>
                <div className='nonloop-block-13 owl-carousel'>
                    <div className='testimony'>
                        <img src={person_1} alt='' className='img-fluid' />
                        <h3>Cloe Marena</h3>
                        <span className='sub-title'>Owner of Building Co.</span>
                        <p>&ldquo;<em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium non eligendi totam natus ullam cumque! Assumenda optio, ad in! Nesciunt natus veritatis hic iste quas. Sunt iste autem vel repudiandae.</em>&rdquo;</p>
                    </div>
                </div>
            </div>

        </div>
    )
}

export default Clientes

Entretanto, este trecho de código não é carregado. Ele somente é carregado se eu der um reload na página.

<div className='container site-section block-13 testimonial-wrap'>
                <div className='nonloop-block-13 owl-carousel'>
                    <div className='testimony'>
                        <img src={person_1} alt='' className='img-fluid' />
                        <h3>Cloe Marena</h3>
                        <span className='sub-title'>Owner of Building Co.</span>
                        <p>&ldquo;<em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium non eligendi totam natus ullam cumque! Assumenda optio, ad in! Nesciunt natus veritatis hic iste quas. Sunt iste autem vel repudiandae.</em>&rdquo;</p>
                    </div>
                </div>
            </div>

Alguém poderia me auxiliar com essa questão?

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom'

import Cabecalho from './componentes/Cabecalho'
import Inicio from './componentes/Inicio'
import Institucional from './componentes/Institucional';
import Sobre from './componentes/Sobre';
import Contato from './componentes/Contato';
import Clientes from './componentes/Clientes';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <div className="site-wrap">
          <Cabecalho />
          <Route path='/' exact component={Inicio} />
          <Route path='/institucional' component={Institucional} />
          <Route path='/sobre' component={Sobre} />
          <Route path='/clientes' component={Clientes} />
          <Route path='/contato' component={Contato} />
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;
2
  • copiei o mesmo codigo(so tive que trocar por imagem no meu pc) e carregou de primeira, voce pode passar o seu index ou App.js ou onde voce esta carregando o <Clientes/> ??
    – rafaelphp
    Commented 16/06/2019 às 21:55
  • Adicionei o App.js Commented 17/06/2019 às 1:56

1 Resposta 1

2

É porque vocês esta usando o owl-carousel em um projeto React. O owl-carousel usa o jQuery. Em teoria você não precisa do jQuery junto com o React. Isso pode causar problemas, como o que você está enfrentando.

Dito isso, você pode:

a) Procurar um carousel feito em react( ou fazer um você mesmo)

b) Insistir em usar o owl-carousel, e baixar uma versão feito para o react

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .