Owl Carousel npm module is not working in reactjs

Question

I am working on a reactjs application and I am using owl carousel npm module to show some data.

I am having a component which only renders owl carousel , for that I installed owl carousel and importing like below

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

and below is the render method

 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>

        )
  }

Now, problem is that when the application get started carousel items not visible and when I click any link which contains the root path http://localhost:3000/ (suppose the logo of the application contains href of http://localhost:3000/ and when click on logo which is <a href="http://localhost:3000"><img src="logo.png /></a>) then carousel gets appear on the page.

I don't know how to fix it, Please help me.

cs95 · Accepted Answer · 2019-07-03 01:35:03Z

0

+50

I guess your problem is that you are not using setState to change the state.

edited Jul 3, 2019 at 1:35

cs95

406k106 gold badges744 silver badges798 bronze badges

answered Jan 13, 2019 at 3:13

Eugenio Valeiras

1,0201 gold badge10 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Saurabh Sharma Over a year ago

I am fetching data from a RestAPI on ComponentDidMount and then set data in state ...

constructor(props){         super(props);         this.state = {             response:[]         }     }  	componentDidMount(){         axios.get('http://localhost:3001/<endpoint>').then((res)=>{             if(res.data.status === 'S') this.setState({response:res.data.data});          })     }

Eugenio Valeiras Over a year ago

React version??

Saurabh Sharma Over a year ago

react version ^16.4.2

Rahul Kadukar · Accepted Answer · 2024-01-03 04:25:04Z

0

if you are fetching data from the api then Just do conditional rendering, like this

  {Products.length > 0 && (
    <OwlCarousel id="Home-Carousel-Owl" className="owl-theme" {...options}>
      {Products.map((product) => (
        <Product
          key={product.id}
          title={product.title}
          price={product.price}
          image={product.image}
        />
       ))}
    </OwlCarousel>

edited Jan 3, 2024 at 4:25

Rahul Kadukar

9503 gold badges19 silver badges37 bronze badges

answered Dec 27, 2023 at 9:55

Ashutosh Yadav

1

Collectives™ on Stack Overflow

Owl Carousel npm module is not working in reactjs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related