BAD ADJUSTING OF CAROUSEL WHEN CHANGE OF WIDTH

[danielruiz97]

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:

cloud9carousel/css/common.css

Lines 28 to 33 in 25f7798

	.wrap {
	width: 980px; /* fixed width, centered in viewport */
	left: -490px;
	margin-left: 50%;
	position: relative;
	}

The main carousel element itself is only given a height:

cloud9carousel/index.html

Lines 20 to 21 in 25f7798

	#showcase {
	height: 460px;

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

cloud9carousel/index.html

Lines 83 to 92 in 25f7798

	<div class="wrap">
	<h1>Which browser is your favorite?</h1>
	<div id="showcase" class="noselect">
	<img class="cloud9-item" src="images/browsers/firefox.png" alt="Firefox">
	<img class="cloud9-item" src="images/browsers/wyzo.png" alt="Wyzo">
	<img class="cloud9-item" src="images/browsers/opera.png" alt="Opera">
	<img class="cloud9-item" src="images/browsers/chrome.png" alt="Chrome">
	<img class="cloud9-item" src="images/browsers/iexplore.png" alt="Internet Explorer">
	<img class="cloud9-item" src="images/browsers/safari.png" alt="Safari">
	</div>

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