Load Reactjs page

Asked

Viewed 758 times

0

Hello, I have the following code:

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

However, this code snippet is not loaded. It is only loaded if I give a reload on the page.

<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>

Could someone help me with this question?

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;
javascript react

  • I copied the same code(I only had to change for image on my pc) and loaded first, You can pass your index or App.js or where you are loading the <Clients/> ??

  • I added App.js

1 answer

2

It’s because you’re using the owl-carousel in an React project. Owl-Carousel uses jQuery. In theory you don’t need jQuery along with React. This can cause problems such as what you are facing.

That said, you can:

a) Find a Carousel made in Act( or make one yourself)

b) Insist on using the owl-carousel, and download a version made for the React

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.