Large images are not centering correctly

[meddy672]

Describe the bug Large images (996 x 440) are not properly centered.

To Reproduce If you click on another page, refresh the browser, then click back on the page where the carousel is located, the carousel image appears slightly off center. It is not until you refresh the browser that the carousel is properly re-centered.

---

IssueHunt Summary

Backers (Total: $0.00)

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]

Thanks @meddy672 for reporting. Could you provide an example code (containing such a large image) which would be possible to copy-paste to the docs/ demo so everybody could easily see that issue?

[meddy672]

I can provide you the code on how I used it within my project, however, the simulating the issue is problematic because it happens when you navigate to a different page, then refresh, then navigate back to the page with the carousel and then from there we have noticed it is slightly off centered. On a side note while on the page with the carousel if you refresh the browser then the carousel has no centering issues. Again it only happens when you are on a different page, then refresh, then navigate back to the carousel. I think it could be some type of loading or rendering issue, but I thought reaching to you guys would be the best first step. Would you still like to see the code used implement the carousel?

[piotr-s-brainhub]

@meddy672

It would be good to see that code and a video showing your case. After going back to the page with carousel and reloading, is the carousel centered again?

[meddy672]

Thank you for your quick response. Attached is a link to a dummy repo with the code containing carousel. dummy-carousel-repo

[meddy672]

I have added a video demonstrating the issue to the repo as well.

[meddy672]

Has there been any update on this issue?

[piotr-s-brainhub]

@meddy672

Not yet but you're more than welcome to open a PR if you know how to fix that. I watched your video but we need more time to fix that.

[meddy672]

Ok thanks for the update. I have tried adjusting some of the css used to style the carousel images, but with no success. I will continue to work the issue from my end and if we are able to produce a solution, then we will definitely let you guys know.

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

[piotr-s-brainhub]

@meddy672

Are you going to work on this issue?

[meddy672]

We have set the issue aside for now with hopes that your team would be able to resolve the issue. Any knowledge you have discovered on the issue will help us out and is greatly appreciated.

[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 cancelled funding for this issue.(Cancelled amount: $1.00) See it on IssueHunt

[piotr-s-brainhub]

@meddy672

Generally, there are many problems with the offset so it may be one of them.

This issue isn't a high priority for us so we cannot fix it at the nearest time.

However, if you convince your colleagues to like (👍) this issue, it could be fixed sooner.

[hyomiTheTech]

Hi,

I experienced the same issue, and I temporarily solved the issue by setting "itemWidth" to the width value of the image in the carousel when it is properly centered.

I noticed that for some reason when the page loads, the widths of the images in the carousel are larger than the it should be as shown below.

But like @meddy672 described, when I resize the browser or page, the images properly re-centered. And in my case the width value of the images when it is properly re-centered was 155px, as shown below.

So I set up the "itemWidth" property in the carousel by 155, and it fix the issue.

I hope it helps some people experiencing the similar issues.

[piotr-s-brainhub]

@hyomiTheTech

Thanks for your observation.