akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.77k stars 2.11k forks source link

Support slider syncing #527

Closed adamsoffer closed 6 years ago

adamsoffer commented 8 years ago

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

patriciomaseda commented 7 years ago

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

briziel commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

Extra-lightwill commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

Not vorhandenen. I meant each slider.

Extra-lightwill commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 6 years ago

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