React-slick: slickGoTo full implementation

[bvasko]

What work is left for slickGoTo? I know there is some code in there for it - I am currently using it. The documentation has it listed as not supported yet. I know if I turn on lazyLoading the slide will not render with slickGoTo if it had not been previously loaded. And it currently lacks animation. Are there any other issues that need to be resolved for this feature to be considered done?

[martinpesout]

+1 also for implementation of slickGoTo.

I need to implement custom navigation of slick carousel but it's not possible to do it without this method.

[Yuripetusko]

Need this also

[mhenag]

@martinpesout A basic use of slickGoTo works already for me - set the value on the props and let it re-render. I'm using redux to maintain the value of slickGoTo.
This may be of use to you;

//Maintain the value
function mapStateToProps(state) {
  return {   
    slideToIndex: state.get('slideTo')
  };
}
export const ComponentContainer = connect(
  mapStateToProps,
  actionCreators
)(Component);


//Assign in the props
var settings = {
      dots: true,      
      slidesToShow: 1,
      slidesToScroll: 1,
      slickGoTo:this.props.slideToIndex
    };

You can then update state.slideTo to navigate to a specific index.

[Boughtmanatee5]

Would it be preferable to make slickGoTo a method on the Slider component to keep it similar to the original slick-carousel. We could use it by returning a reference to the slider in the render.

maybe something like this:

render: function() { 
  var goTo= function(index) { 
      this._slick.slickGoTo(index);
   }
   return (
      <Slider ref={ function(c) { this._slick = c }.bind(this) }/>
    );
}

[Echooff3]

I've got a scenario where slickGoTo only works the first time. https://jsfiddle.net/jskibicki/1r7nayy9/
If a user moves around the carousel and I attempt to set slickGoTo back to the previous number (when the current index has been update) it does not navigate.

[HriBB]

Having some problems with slickGoTo as well ... I use key bindings to go next/prev by updating slickGoTo. It used to work with v0.9, but stopped working with v0.12.2. Some quick debugging lead me to react-slick/lib/mixins/helpers.js

slideHandler: function slideHandler(index) {
    var _this = this;

    // Functionality of animateSlide and postSlide is merged into this function
    // console.log('slideHandler', index);
    var targetSlide, currentSlide;
    var targetLeft, currentLeft;
    var callback;

    if (this.props.waitForAnimate && this.state.animating) {
      // this is where it would prevent my slider to rerender
      return;
    }

    // ...

Simply setting waitForAnimate: true fixed the rendering problem. Hope it helps someone.

Now I have a problem with animation using slickGoTo. Sometimes it works, sometimes is doesn't. No idea yet why, will deed deeper soon ...

[akiran]

slickGoTo is now change to method instead of prop.
Check this example https://github.com/akiran/react-slick/blob/master/examples/SlickGoTo.js

open a new issue if you are still facing issues with slickGoTo

[iDuuck]

Couldn't this be given to the user, what method he prefers? If using redux I am not able to keep track (or let redux handle) the progress of the slider.

[iDuuck]

@akiran