BAD ADJUSTING OF CAROUSEL WHEN CHANGE OF WIDTH

[danielruiz97]

trafficstars

Hi there Please I need help with this problem, the situation is that my carousel stays aside from the center.

I based my implementation on "browser demo" (http://specious.github.io/cloud9carousel/).

In my referrals I'm only using "cloud9carousel.js" in order to work, which contains the source code (Cloud 9 Carousel 2.0.4) and "cloud9carousel.css" for styling.

Here is the code used (fancybox is a tool used for opening a gallery when an image is clicked)

I annex some screenshots of the normal behavior versus the change in viewport

Greetings

[danielruiz97]

Any new suggestion please

[specious]

The carousel is currently designed to require a well-defined width and height in order to render (issue #28 deals with the possibility of making it automatically adjust to changes in viewport dimensions).

In the demos, the carousel's parent container is given a width and is horizontally centered within its parent:

https://github.com/specious/cloud9carousel/blob/25f77989f4a847c6a360ad9e9ddc7bfa8118f193/css/common.css#L28-L33

The main carousel element itself is only given a height:

https://github.com/specious/cloud9carousel/blob/25f77989f4a847c6a360ad9e9ddc7bfa8118f193/index.html#L20-L21

The purpose of the parent container is to contain additional elements along with the carousel:

https://github.com/specious/cloud9carousel/blob/25f77989f4a847c6a360ad9e9ddc7bfa8118f193/index.html#L83-L92

If you have just the carousel by itself, you should be able to set all of that directly on the carousel.

[danielruiz97]

Hello there, I understand the demo implementation, tested some properties as the original code but the behaviour is still the same when changing from a device to another, the change of the viewport needs to hard reset the page to adjust correctly.

I appreciate the attention to the case, and now I'm gonna analyze the issue referred before but I'm seeing that relates a lot to the functionality script and I'm having some difficult to understand the code.

If possible, I would be really thankful if someone could share a JS FIDDLE or any code example to help me understand better

[specious]

The current version of the carousel is designed to render inside a container of well-defined dimensions at the time of its instantiation.

It doesn't readjust after the container is resized, which is why issue #28 is still open.

If there's a way you could throw up a demo of what you're working on, I might get a better understanding of exactly what is happening in your code.

[danielruiz97]

Sure, please allow me to develop a working example to reproduce the issue. I will share it in a new comment so I could contribute to the topic