extend cellAlign prop functionality to have a different value at the carousel starting point

[manpenaloza]

question / feature request

at first, thx for this awesome open source react component! we've started to develop a new feature with it, deployment will follow soon. my feature request results from a UX requirement we aim to fulfill.

Actual behavior: in terms of how adjustable cell aligns are from the current perspective, there's just the possibility to set the cellAlign prop once and its settings will be applied to all slides of the carousel.

Expected behavior: the nuka-carousel Carousel component offers the possibilithy to pass a new initialCellAlign property that is being applied only to the initial/starting appearance of the carousel. once the user starts interacting, the component uses alignment settings applied by the cellAlign property

see visual example:

Suggestion in case this component extension is something you'd support, I could try developing it and send a pr. can't promise I can manage to do so in terms of "will I be able to accomplish it?", but if that's an option for you, I'd start analyzing your codebase to maybe come up with a solution.

[sarmeyer]

Hey @manpenaloza I think this is a great idea. I'd be happy to review any work you submit, even if it's a WIP and will need some guidance at the end. Thanks for submitting this feature request!

[manpenaloza]

Hey @sarmeyer, great! Will open an initial branch/pr the next few days and (hopefully :)) push proper code to that pr.

[sarmeyer]

Hey @manpenaloza! I haven't been able to spend any time adding this feature to the carousel, but I did come up with a way to handle it from the FE. Are you already using custom centerLeft and centerRight controls through the renderCenterRightControls and renderCenterLeftControls props? You can access the currentSlide from that prop method and dynamically update the slideIndex stored in state. Like this:

renderCenterRightControls={({ nextSlide, currentSlide }) => (
            <button
              onClick={() => {
                this.setState({ slideIndex: currentSlide + 1 });
                nextSlide();
              }}
            >
              Next
            </button>
          )}

Then you can conditionally set the cellAlign prop on the Carousel component like so - cellAlign={this.state.slideIndex === 0 ? 'left' : 'center'}

[manpenaloza]

Hey @sarmeyer, not yet. Thank you for your suggestion. From current perspective, this just works great :). Thank you!

[mmintel]

That works but is super clunky for me. When the cellAlign changes it will recalculate the position and then snap to that, that's not a smooth movement.

[carbonrobot]

This functionality or feature no longer exists in the current versions of Nuka