asNavFor works for all items expect first one
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.9k
- Forks
- 2.1k
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
I am attempting to use the `asNavFor` prop.It works when I click on any of the cells besides the first one. However, when I click on the first item in the "nav slider" the first slider doesn't move.
Has anyone else had this issue?
Code (Removed Some for readability):
```
class Listings extends Component {
state = {
mainSlider: undefined,
navSlider: undefined
}
componentDidMount() {
this.setState({
mainSlider: this.mainSlider,
navSlider: this.navSlider
})
}
render() {
const { pageData } = this.props
const styles = configurableStyles(pageData)
const {
listingsTitle,
listings,
} = pageData
const mainSettings = {
accessibility: true,
autoplay: true,
autoplaySpeed: 10000, //10s
arrows: false,
dots: false,
infinite: listings && listings.length > 6,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [{
breakpoint: 650,
settings: {
infinite: listings && listings.length > 4,
}
}],
className: 'no-dots',
ref: (slider) => (this.mainSlider = slider),
asNavFor: this.state.navSlider
}
const navSettings = {
accessibility: true,
autoplay: true,
autoplaySpeed: 10000, //10s
arrows: false,
dots: true,
infinite: listings && listings.length > 6,
speed: 500,
slidesToShow: 6,
slidesToScroll: 1,
focusOnSelect: true,
responsive: [{
breakpoint: 650,
settings: {
infinite: listings && listings.length > 4,
slidesToShow: 4,
}
}],
//className : 'slick-left-align',
ref: (slider) => (this.navSlider = slider),
asNavFor: this.state.mainSlider,
}
return (
{listingsTitle}
{listings && listings.map((cell, cellIndex) => {
const { price, address, bed, bath, thumbnail } = cell
return (
{...}
)
})}
{listings && listings.map((cell, cellIndex) => {
const { address, thumbnail } = cell
return (
{...}
)
})}
)
}
}
```
Beitragsleitfaden
Bewertung
Dieses Issue wurde noch nicht bewertet.