First Element of owl-item is empty every time.
See original GitHub issueHi,
I am using this library into my react component for some reasons, which i don’t know it’s creating first ow-item active empty.
`constructor(props) { super(props);
this.state = {
timeoutId: null,
show: false,
options: {
items: 5,
nav: true,
rewind: true,
autoplay: false,
lazyLoad: true,
mouseDrag: false,
responsive: {
responsiveRefreshRate: 100
}
}
};
}
componentDidMount() {
this.props.dispatch(getFlashSale());
console.log('adil');
}
componentWillMount() {
this.timeoutId = setTimeout(() => {
this.setState({show: true});
}, 1000);
}
componentWillUnmount() {
if (this.timeoutId) {
clearTimeout(this.timeoutId);
}
}
createFlashListDOM() {
return this.props.flashSaleList.map((obj, i) => (
<FlashSaleItem row={obj} key={i} index={i}/>
));
}
render() {
if (this.props.loader == true) {
return <Loading/>
} else {
return (
<div className={this.state.show ? 'flash-sale owl-after-load' : 'flash-sale'}>
<div className="flash-sale-box">
<ul className="flash-sale-list">
<OwlCarousel options={this.state.options}>
{this.createFlashListDOM()}
</OwlCarousel>
</ul>
</div>
</div>
);
}
}
import React from 'react';
export default function FlashSaleItem(props) {
return (
<li key={props.index}>
<div className="flash-sale-list-item">
<a>
<div className="flash-sale-image">
<div className="flash-sale-image-inner">
<img src={props.row.IMAGE.SRC} alt="Loading ..."/>
</div>
</div>
<div className="flash-sale-title">
<p>{props.row.NAME}</p>
</div>
<div className="flash-sale-price">
<span className="old-price">{props.row.PRICES.PRICE_OLD} AED</span>
<span className="new-price text-bold">{props.row.PRICES.PRICE_NEW} AED</span>
</div>
</a>
<div className="pl-10 pr-10">
<div className="flash-sale-buy-now">
<a>
BUY NOW
</a>
</div>
<span className="flash-sale-timer">
<small className="text-bold">00 hrs. 28 min. 12 sec.</small>
</span>
</div>
</div>
</li>
);
}
`
Thanks Adil
Issue Analytics
- State:
- Created 6 years ago
- Comments:5
Top Results From Across the Web
First Element of owl-item is empty every time. #43 - GitHub
Hi, I am using this library into my react component for some reasons, which i don't know it's creating first ow-item active empty....
Read more >Empty item in Owl Carousel - Stack Overflow
I have 10 items in owl, in loop, and after 10th item, there's one extra blank item. How can I get rid of...
Read more >Options | Owl Carousel | 2.3.4 - GitHub Pages
Duplicate last and first items to get loop illusion. center. Type: Boolean Default: false. Center item. Works well with even an odd number...
Read more >Owl Carousel 2 problem with overflow hidden - CSS-Tricks
Hello,. I used owl carousel, but this script have serious problem, it dont allow you to display absolute child, because of forced ...
Read more >owl.carousel.js.txt - Warner Music Nashville
_drag = { time: null, target: null, pointer: null, stage: { start: null, ... element.find('.owl-item'); // if the items are already in the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Add a condition to only render
<OwlCarousel>{children}</OwlCarousel>
whenchildren.length > 0
@adilsaeed31
this works for me: