Automatic overflow hides content

[wecraft]

Hello @specious , I really like how the plugin works, but using this init:

$("#carousel").Cloud9Carousel({
	buttonLeft: $("#buttons > .left"),
	buttonRight: $("#buttons > .right"),
	autoPlay: 0,
	bringToFront: true,
	smooth: true
});

the content is hidden by default, only the arrows are visible.

This is my markup (using pug):

#carousel
	img.cloud9-item(src='images/phone-screens/screen01.png', alt='Item #1')
	img.cloud9-item(src='images/phone-screens/screen02.png', alt='Item #2')
	img.cloud9-item(src='images/phone-screens/screen03.png', alt='Item #3')
        #buttons
		button.left
			| ←
		button.right
			| →

[specious]

I appreciate that you are giving this carousel a try. Thank you for sharing what you're attempting to do and that it's not working as might be expected.

The carousel element isn't automatically sized to accommodate its children, as that would cause constant resizing and be difficult to work with. I recommend either explicitly defining its dimensions or have the carousel be automatically sized to fit a parent container.

Also, if you look at the demos, the button controls are not contained inside the carousel element itself.

[nicholasfay]

@specious How would you automatically size the carousel to fit the parent container when resizing the window?