Comments (13)
@sbaechler You probably are not passing down the props into your React component. Can you see the discussion in #73 helps ??
from react-slick.
No, I was using a wrapper div. But even with passing down the props the problem still exists.
from react-slick.
@sbaechler Can you write an example so the I can reproduce the issue?
from react-slick.
I got a quick hack to the same issue -> #95
from react-slick.
I'm having a similar issue:
Hey, here's an example of the problem I'm having:
getVidElement: function (vidId) {
var video = this.props.Annotation[vidId];
var vidElement;
vidElement = <Video video={video} />;
return (<div key ={video.id.objectId} >
{vidElement}
</div>);
},
render: function () {
var vidElements = this.getListOfVidIds().map(this.getVidElement);
var settings = {
dots: true,
infinite: true,
lazyLoad:true,
arrows:true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 3
};
return (
<Slider {...settings} >
{vidElements}
</Slider>
);
}
Even if I pass {...this.props} to both the
from react-slick.
Ok, so I removed an unnecessary level of children and it still doesn't work...:
getListOfVidIds: function () {
return Object.keys(this.props.Annotation);
},
getVidElement: function (vidId) {
var video = this.props.Annotation[vidId];
var vidElement;
vidElement = <div
onClick = {this.props.handleThumbnailClick.bind(null, this, video)}
onMouseOver = {this.handleMouseOver}
onMouseOut = {this.handleMouseOut}
style={videoStyle}
>
<h3>{video.description}</h3>
<h5>{video.hashtags}</h5>
</div>;
return (<div key ={video.id.objectId} >
{vidElement}
</div>
);
},
render: function () {
var vidElements = this.getListOfVidIds().map(this.getVidElement);
var slidesScroll = 3
if (vidElements.length <4 ){
slidesScroll = 1
}
var settings = {
dots: true,
lazyLoad: true,
infinite: true,
arrows:true,
speed: 500,
slidesToShow: slidesScroll,
slidesToScroll: slidesScroll
};
return (
<Slider {...settings} >
{vidElements}
</Slider>
);
}
});
from react-slick.
I'd really like to resolve this problem in my app. Is there anything further I could do?
from react-slick.
I will try to fix it soon
from react-slick.
Any update on this? I'm also having this issue
from react-slick.
Same here. Seeing the same issue.
from react-slick.
Same here. It's been a while since you posted, I wonder what were your workarounds, guys?
from react-slick.
I still have this same issue
from react-slick.
I think most lazyloading related issues have been fixed. (latest release 0.19.0)
Please refer to this codesandbox example: https://codesandbox.io/s/n9p51n1lo0
If someone still has any problem regarding this, please generate a demo on codesandbox, and feel free to request reopen.
from react-slick.
Related Issues (20)
- initialSlide is ignored on breakpoints HOT 1
- currentSlide from afterChange event shows decimal when using SlidesToShow as decimal and infinite:false
- autoplay does not work when PauseOnHover, pauseOnFocus, and pauseOnDotsHover are all true
- Unexpected Behavior in Vertical Mode Swipe HOT 6
- Link Css file not working in Nextjs HOT 10
- Slick Infante is not working HOT 1
- If used infinite, speed will not work
- IOS 14 and up - slider won't scroll on drag
- Get offsetWidth of element in slick-track
- Upgrade to react 19 HOT 1
- React-slick issue HOT 1
- dots are coming as numbers
- asNavFor behavior change after 0.30 release
- I have only one slide and its replicate the inner content three times HOT 6
- Prop "slide" seems not to work HOT 2
- bug with aria-hidden
- Error with compatibility with react ^18 HOT 6
- RTL Direction Not Working Properly HOT 1
- Border being delayed when going from last slide to first slide again HOT 2
- Swipe sensitivity using touchThreshold not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-slick.