Is there support for syncing carousels like in the original slick?
colindresj
All 67 comments
+1
pghalliday
on 6 Jul 2015
:+1:
Where does this stand? I scanned the list of missing features from the jQuery Slick plugin (https://github.com/akiran/react-slick/issues/58), but I don't see it. It would be a great addition, though!
hyu
on 5 Aug 2015
+1
ohmyguigs
on 22 Oct 2015
+1
rachmulvey
on 26 Nov 2015
+1
example use case, just in case: main carousel is a series of images, nav carousel is a series of thumbnails of the main images.
zakness
on 21 Jan 2016
+1
DimaRGB
on 27 Apr 2016
+1
tk1024
on 2 Jun 2016
+1
zavven
on 9 Aug 2016
+1
drewbietron
on 10 Aug 2016
+1
Superoryco
on 17 Aug 2016
+1
tipjoe
on 26 Aug 2016
+1
yasammez
on 25 Oct 2016
+1
timhecker
on 23 Nov 2016
+1
guilhermemarconi
on 1 Dec 2016
+1
shawngong
on 7 Dec 2016
@akiran Would you mind pushing your progress on this? I'd love to help if I can.
roblingle
on 29 Dec 2016
@akiran What is the current progress of this feature? is there any help needed?
Exomnius
on 26 Feb 2017
So this still does not work if we pass the param?
tekfunk
on 28 Feb 2017
@tekfunk Nope, still can't pass it. Really annoying that I have to use a different slider for thumbnail navigation instead of just using Slick.
paulkmiller
on 2 Mar 2017
@paulkmiller please can you link it here?
timhecker
on 2 Mar 2017
@timhecker
https://github.com/xiaolin/react-image-gallery
Really easy set-up, easy to pass props, mobile responsive, absolutely lovey to use.
paulkmiller
on 2 Mar 2017
please add asNavFor...
frolant
on 15 Mar 2017
:+1:
slek22
on 20 Apr 2017
+1
undermuz
on 5 May 2017
+1
PengyuanZhao
on 8 May 2017
+1
ryanwalters
on 24 May 2017
+1
DenisFrezzato
on 29 May 2017
+1
igerko
on 15 Jun 2017
+1
Extra-lightwill
on 10 Jul 2017
July 2017... +1
shatalovdm
on 28 Jul 2017
+1
pikilon
on 11 Aug 2017
+1
ArbaazDossani
on 24 Aug 2017
+1
niharjyoti333
on 26 Aug 2017
+1
hpieroni
on 25 Sep 2017
+1
neginbasiri
on 16 Oct 2017
+1
joaoalves-kununu
on 20 Oct 2017
+1
marekalgoud
on 20 Oct 2017
I'm using a combination of slickGoTo and afterChange passing around the index of the selected index and it seems to work.
//Main slider
<Slider className='main-slider'
afterChange={this.handleAfterChange}
slickGoTo={this.state.currentIndex}>...</Slider
//Thumbnails
<Slider className='thumbnail-slider'
infinite={true}
slidesToShow={7}
focusOnSelect={true}
slickGoTo={this.props.selectedIndex}
afterChange={this.props.afterChange}>...</Slider
bryonchan
on 25 Oct 2017
+1
pappaschris
on 26 Oct 2017
@bryonchan Would you mind sharing the complete code that works as you described?
ooloth
on 17 Nov 2017
@ooloth I'll try, but don't know how to get the code to indent properly here. This is not working code as I have more going on in my live code. Basically both sliders share the same currentIndex synchronised through slickGoTo and afterChange. I think focusOnSelect might need to be true if slidesToShow is more than 1.
MainSlider.jsx:
public constructor(props) {
this.state = {
currentIndex: 0
}
}
public handleAfterChange(index) {
this.setState({
currentIndex: index,
});
}
render() {
return (<div>
<Slider className={props.className}
dots={false}
accessibility={true}
afterChange={this.handleAfterChange}
slickGoTo={this.state.currentIndex}>
{props.children}
</Slider>
<ThumbnailSlider currentIndex={this.state.currentIndex} afterChange={this.handleAfterChange}/>
<.../div>
)
}
ThumbnailSlider.jsx:
<Slider className='thumbnail-slider'
swipe={false}
infinite={true}
centerMode={true}
slidesToShow={7}
focusOnSelect={true}
slickGoTo={this.props.currentIndex}
afterChange={this.props.afterChange}>
{validImageData.map((imageData, i) => {
return renderThumbnail(imageData, i);
})}
</Slider>
bryonchan
on 17 Nov 2017
@bryonchan Thank you! I was able to get it working, but I see a console warning that the slickGoTo prop is deprecated and will be removed in the next release...
Any tips on how to adapt this solution to use the slickGoTo method instead of the slickGoTo prop?
ooloth
on 17 Nov 2017
@ooloth Not tested this myself, but I think you're supposed to get the instance of the slider using the "ref" callback, then call slickGoTo in the event handlers as needed.
MainSlider.jsx:
public constructor(props) {
this.state = {
currentIndex: 0
}
}
public handleAfterChange(index) {
this.setState({
currentIndex: index,
});
**this.slider.slickGoTo(index);**
}
render() {
return (<div>
<Slider **ref={(slider) => {this.slider;}}** className={props.className}
dots={false}
accessibility={true}
afterChange={this.handleAfterChange}>
{props.children}
</Slider>
<ThumbnailSlider currentIndex={this.state.currentIndex} afterChange={this.handleAfterChange}/>
<.../div>
)
}
ThumbnailSlider.jsx:
componentDidUpdate(prevProps) {
if(this.props.currentIndex !== prevProps.currentIndex){
this.slider.slickGoTo(this.props.currentIndex);
}
}
<Slider className='thumbnail-slider'
**ref={(slider) => {this.slider;}}**
swipe={false}
infinite={true}
centerMode={true}
slidesToShow={7}
focusOnSelect={true}
afterChange={this.props.afterChange}>
{validImageData.map((imageData, i) => {
return renderThumbnail(imageData, i);
})}
</Slider>
bryonchan
on 17 Nov 2017
+1
MMrj9
on 17 Nov 2017
@bryonchan Thanks again! I'll test this out soon.
In the meantime, I've opened an issue asking akiran not to remove the slickGoTo prop, as it is currently the easiest way to simulate the asNavFor functionality.
ooloth
on 17 Nov 2017
Will this also work for 2 infinite sliders that are synced? What happens when you 'scroll' to the back to the start by going to the next slide? Will the synced slider also slide in the same direction?
Exomnius
on 20 Nov 2017
+1
DarekDarecki
on 29 Nov 2017
+1
crdo
on 7 Jan 2018
+1
nimatrueway
on 11 Jan 2018
+1
frosato-dev
on 15 Jan 2018
+1
saeedjalalisj
on 20 Jan 2018
+1
rzkhosroshahi
on 20 Jan 2018
Currently, there is no support for this, but we'll consider doing so very soon.
laveesingh
on 1 Feb 2018
+1
luckybusted
on 5 Feb 2018
+1
sveta4acova
on 8 Feb 2018
This feature has been implemented and will be released soon.
laveesingh
on 26 Feb 2018
can I know the exact date of release version of this feature?
or is there any workaround to make this feature work on current version other than SlickGoTo (because it is deprecated)?
darrylsepeda
on 28 Feb 2018
This should be released by the weekend.
For more, refer to this commit: 2015e14c03ea0b1728e966ccc12f572453a79fc1
laveesingh
on 28 Feb 2018
I'm having trouble figuring out how to get the new asNavFor feature to work, any help (or a working example) would be appreciated
here is my current component (both sliders seem to be working, but navigating in the thumbnails slider, does not effect the currently selected slide in the focus slider):
class Carousel extends React.Component {
render = () => {
var focusSettings = {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
className: `carousel-focus ${this.props.carouselName}-focus`,
}
var thumbnailSettings = {
slidesToShow: 5,
slidesToScroll: 1,
dots: false,
focusOnSelect: true,
arrows: false,
adaptiveHeight: true,
variableWidth: true,
asNavFor: this.refs.carouselFocus,
className: `carousel-thumbnails ${this.props.carouselName}-thumbnails`
}
return (
<div className="carousel-inner-wrapper">
<Slider {...focusSettings} ref="carouselFocus">
{this.props.images.map(function (imgLink, i) {
return (
<div className="img-container">
<img className="carousel-thumbnail" src={imgLink}/>
</div>
)
})}
</Slider>
<Slider {...thumbnailSettings} ref="carouselThumbnails">
{this.props.images.map(function (imgLink, i) {
return (
<div className="img-container">
<img className="carousel-thumbnail" src={imgLink}/>
</div>
)
})}
</Slider>
</div>
)
}
}
mhfowler
on 28 Mar 2018
I wasn't able to figure how to use asNavFor, but I was able to achieve the results I wanted using beforeChange (if this is helpful to anyone):
class Carousel extends React.Component {
constructor() {
super();
this.handleBeforeChange = this.handleBeforeChange.bind(this);
}
componentDidMount() {
}
handleBeforeChange(oldIndex, newIndex) {
this.refs.carouselFocus.slickGoTo(newIndex);
}
render = () => {
var focusSettings = {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
className: `carousel-focus ${this.props.carouselName}-focus`,
}
var thumbnailSettings = {
slidesToShow: 5,
slidesToScroll: 1,
dots: false,
focusOnSelect: true,
arrows: false,
adaptiveHeight: true,
beforeChange: this.handleBeforeChange,
variableWidth: true,
className: `carousel-thumbnails ${this.props.carouselName}-thumbnails`
}
return (
<div className="carousel-inner-wrapper">
<Slider {...focusSettings} ref="carouselFocus">
{this.props.images.map(function (imgLink, i) {
return (
<div className="img-container">
<img className="carousel-thumbnail" src={imgLink}/>
</div>
)
})}
</Slider>
<Slider {...thumbnailSettings} ref="carouselThumbnails">
{this.props.images.map(function (imgLink, i) {
return (
<div className="img-container">
<img className="carousel-thumbnail" src={imgLink}/>
</div>
)
})}
</Slider>
</div>
)
}
}
We do have a demo to show how to use it.
laveesingh
on 28 Mar 2018
We do have a demo to show how to use it.
Its not working
mishra1947
on 25 Nov 2018
Its not working
@mishra1947 yes, it is. Maybe it's some plugin on your browser or something like that that is throwing exceptions on the page JS, but the demo is working here normally - and it's pretty neat.
guilhermemarconi
on 26 Nov 2018
Weird issue, happens when I copy-paste the demo into my project too:
The slider1 only advances every SECOND step of the slider2.
First advance on slider2: nothing happens on slider1.
Second advance on slider2: slider 1 advances by 1.
Third advance on slider2: nothing happens on slider1 ... an so forth.
As I said, this happens for me even when copy-pasting the demo code directly from the demo page. I can see it working right on the demo page, so there must be something wrong with my version? I've updated to latest...
ovsw
on 24 Feb 2019
@ovsw I have the same issue, didn't find any workaround yet but if you have, can you please share it?
muresanandrei1
on 5 Mar 2019
@muresanandrei1 the PR here fixes the issue, but they're not approving it for some reason: https://github.com/akiran/react-slick/pull/1423
ovsw
on 5 Mar 2019
@ovsw Thanks! apparently downgrading to 0.23.1 fixes the issue, tested it just now
muresanandrei1
on 5 Mar 2019
Related issues
jfamousket
路
3Comments
enriquelopez-atlas
路
3Comments
vugman
路
3Comments
laveesingh
路
3Comments
rohitgoyal7
路
3Comments
Most helpful comment
This feature has been implemented and will be released soon.