Support slider syncing

[adamsoffer]

Looking to convert my slick carousel to use react but noticed this doesn't support slider syncing :/

[patriciomaseda]

You can easily achieve syncing by passing the same props from a parent component to two or more carousels.

[briziel]

Yep, i think the current release still accepts slickGoTo as prop. In this case it would be easy. In the coming release you have to make your slider component as a class an handle livecycle (e.g. In componentReceiveProps) when slider position prop changed and fire slickGoTo(sliderPosition) It's a tragedy that slickGoTo as prop is deprecated.

[Extra-lightwill]

@patriciomaseda @briziel any chance you have any code examples of this? I have a situation where I need a modal carousel to be synced with an on-page carouselfor viewing close-up of product - what's the best way to achieve this?

[briziel]

Hi @Extra-lightwill, One question before i make a long answer. Is it important for you also the synced slider is animated?

[Extra-lightwill]

@briziel Nope.. . Just need the slides to sync so when I open the modal the initial slide is the slide that was showing rather than the first slide. Help much appreciated!

On Jul 9, 2017 15:23, "briziel" notifications@github.com wrote:

Hi @Extra-lightwill https://github.com/extra-lightwill, One question before i make a long answer. Is it important for you also the synced slider is animated?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/akiran/react-slick/issues/527#issuecomment-313922920, or mute the thread https://github.com/notifications/unsubscribe-auth/AUX4St93zSKKDic5SdVbD3z7zcUru9Isks5sMOJOgaJpZM4Kk8HG .

[briziel]

Hi @Extra-lightwill, This is easily to achieve with InitialSlide option. You can can pass it as prop to the modal slider and put it into its settings object. And if you need a synced position you just have to change this prop of the modal slider with the afterChangeCallback in the on-page-slider. When Done this, the modal slider will automatically rerender because the props die change.

[Extra-lightwill]

@briziel This doesn't work because the initialSlide only takes effect on initial render. Once I've loaded the page (which renders both carousels), regardless of the value of initial slide, the slide index won't change. I know the initialSlide value is changing as expected because I'm console logging it. You'd have to use something like slickGoTo - I don't know why slickGoTo as a prop has been deprecated - seems like functionality you'd definitely want.

Code:

const onPageCarouselSettings = {
      customPaging: function(i) {
        return <a><img src={productImageBank[i]}/></a>
      },
      dots: true,
      dotsClass: 'slick-dots-thumbnail',
      infinite: false,
      speed: 280,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      initialSlide: 0,
      afterChange: function (currentSlide, initialSlide) {
        onPageCarouselSettings.initialSlide = currentSlide;
        console.log(onPageCarouselSettings.initialSlide);
      },
    };  

const modalCarouselSettings = {
  customPaging: function(i) {
    return <a><img src={productImageBank[i]}/></a>
  },
  dots: true,
  dotsClass: 'slick-dots-thumbnail slick-thumb',
  infinite: false,
  speed: 280,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  initialSlide: onPageCarouselSettings.initialSlide,
};  `

[briziel]

@Extra-lightwill, You have to put vorhanden caroussels in different components with own lifecycles and then pass the InitialSlide as prop. So if It change... Viola. The slider rerenders :)

[briziel]

Not vorhandenen. I meant each slider.

[Extra-lightwill]

@briziel what's best way to pass data between the two this since the slider components are not in parent-child relationship here? example would be good :)

[patriciomaseda]

You can't pass data between those two. As you said they are at the same level (not parent-child). BUT you will have a common parent. That parent is who has to have the state and pass same props to both (or more) children. That's React basics.

[Extra-lightwill]

@patriciomaseda Ok cool - so this works when i bring up modal but when i close modal the slides go out of sync (i guess because by this time onPageCarousel has already rendered). what's best way to force re-render on onPageCarousel? i.e. i want the same slide showing both before and after modal open and close

[briziel]

@Extra-lightwill when both sliders geht their positions out of the same data, react will rerender every component that needs an update. So just wire the position value to the InitialSlide of the on-page-slider.

[laveesingh]

Slider syncing has been implemented, and will be released very soon.