Prevent first/last pages from sliding further than the carousel's borders

[a-nozeret]

Feature

New Prop to stick first/last CarouselItems to the edges, regardless of the value of centered prop, always displaying a full page.

Context

When slidesPerPage is greater than 1, reaching the first or last element adds unnecessary blank space. Instead, getTransformOffset() could prevent the carousel from sliding further, allowing the entire page to remain visible (respecting slidesPerPage at all times).

Unwanted behaviour:

CodePen: https://codepen.io/anoz/pen/OJVmBxB

---

IssueHunt Summary

Backers (Total: $0.00)

Submitted pull Requests

• #606 new Prop: stickyEdges

---

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[piotr-s-brainhub]

@a-nozeret

Thanks for reporting. I think the example below, possible to reproduce in the docs, is the same issue.

<Carousel
  centered
  arrows
  addArrowClickHandler
  slidesPerPage={4}
  slidesPerScroll={4}
>
 <img src={imageOne} />
 <img src={imageTwo} />
 <img src={imageThree} />
</Carousel>

I think it may be also related to this mobile issue https://github.com/brainhubeu/react-carousel/issues/181

Maybe we'll fix this issue but you're PR is more than welcome.

[issuehunt-oss[bot]]

@piotr-s-brainhub has funded $15.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss[bot]]

@piotr-s-brainhub has funded $1.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss[bot]]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $15.00) See it on IssueHunt

[issuehunt-oss[bot]]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $1.00) See it on IssueHunt

[issuehunt-oss[bot]]

@piotr-s-brainhub has funded $3.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss[bot]]

@piotr-s-brainhub has funded $3.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss[bot]]

@piotr-s-brainhub has funded $2.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss[bot]]

@piotr-s-brainhub has funded $32.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss[bot]]

@piotr-s-brainhub has funded $15.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss[bot]]

@piotr-s-brainhub has funded $2.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss[bot]]

@piotr-s-brainhub has funded $5.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[piotr-s-brainhub]

@aayush420

I leave the brainhubeu organization so I must remove the IssueHunt funding as it's only me who's able to manage these funds.

Moreover, the team decided on Thursday about stopping using IssueHunt but as you've already opened a PR maybe they'll agree to reward you. Please ask @RobertHebel , @humbak, @Lukasz-pluszczewski or other brainhubeu organization members.

[issuehunt-oss[bot]]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $3.00) See it on IssueHunt

[issuehunt-oss[bot]]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $3.00) See it on IssueHunt

[issuehunt-oss[bot]]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $2.00) See it on IssueHunt

[issuehunt-oss[bot]]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $32.00) See it on IssueHunt

[issuehunt-oss[bot]]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $15.00) See it on IssueHunt

[issuehunt-oss[bot]]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $2.00) See it on IssueHunt

[issuehunt-oss[bot]]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $5.00) See it on IssueHunt

[aayush420]

Hey @piotr-s-brainhub please merge and close #608 . It has the fix you need. You forgot to add the new prop stickyEdges to your code. And hey, why did you remove funding on issuehunt after the PR is submitted?

[piotr-s-brainhub]

@aayush420

For me, it doesn't work correctly.

As I've previously mentioned, I'm leaving the brainhubeu organization so nobody would be able to reward it on IssueHunt.

Please contact @RobertHebel , @humbak, @Lukasz-pluszczewski, or other brainhubeu organization members so maybe one of them will re-assign funding and reward it to you.

[RobertHebel]

@aayush420 We are working on restoring funding for already opened PRs. On the next Thursday, I will be able to re-assign money for this issue. Is it ok for you to wait for the funding one week?

And regarding bug @piotr-s-brainhub has mentioned it's not caused by your code so I think everything looks 👍 .

[RobertHebel]

@aayush420 issue hunt for this issue will be recovered tomorrow, sorry for the delay also I've found one bug regarding stickyEdges prop on your PR

[aayush420]

@aayush420 issue hunt for this issue will be recovered tomorrow, sorry for the delay also I've found one bug regarding stickyEdges prop on your PR

Hey, Nice catch! #626 Addresses this new bug.

[issuehunt-oss[bot]]

@roberthebel has funded $59.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[renato]

Any update on this? Is anyone still working on this issue?

[aayush420]

Any update on this? Is anyone still working on this issue?

The PR is basically finished ages ago. The team is not finding time to merge it, it seems.

[issuehunt-oss[bot]]

@roberthebel has cancelled funding for this issue.(Cancelled amount: $59.00) See it on IssueHunt