asNavFor about react-slick HOT 67 CLOSED

This feature has been implemented and will be released soon.

from react-slick.

Currently, there is no support for this, but we'll consider doing so very soon.

from react-slick.

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>
    )
  }
}

from react-slick.

@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>

from react-slick.

This should be released by the weekend.
For more, refer to this commit: 2015e14

from react-slick.

We do have a demo to show how to use it.

from react-slick.

We do have a demo to show how to use it.

Its not working

from react-slick.

👍

Where does this stand? I scanned the list of missing features from the jQuery Slick plugin (#58), but I don't see it. It would be a great addition, though!

from react-slick.

@timhecker

https://github.com/xiaolin/react-image-gallery

Really easy set-up, easy to pass props, mobile responsive, absolutely lovey to use.

from react-slick.

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

from react-slick.

@bryonchan Would you mind sharing the complete code that works as you described?

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+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.

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

@akiran Would you mind pushing your progress on this? I'd love to help if I can.

from react-slick.

@akiran What is the current progress of this feature? is there any help needed?

from react-slick.

So this still does not work if we pass the param?

from react-slick.

@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.

from react-slick.

@paulkmiller please can you link it here?

from react-slick.

please add asNavFor...

from react-slick.

👍

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

July 2017... +1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

@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?

from react-slick.

@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>

from react-slick.

+1

from react-slick.

@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.

from react-slick.

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?

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

+1

from react-slick.

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)?

from react-slick.

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>
    )
  }
}

from react-slick.

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.

from react-slick.

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...

from react-slick.

@ovsw I have the same issue, didn't find any workaround yet but if you have, can you please share it?

from react-slick.

@muresanandrei1 the PR here fixes the issue, but they're not approving it for some reason: #1423

from react-slick.

@ovsw Thanks! apparently downgrading to 0.23.1 fixes the issue, tested it just now

from react-slick.