albell/window resizing and autoheight in cycle2

## window resizing and autoheight in cycle2
<!doctype html>
<html lang="en">
<head>
  <meta charset='utf-8' />
	<meta name="viewport" content="width=device-width">
	<meta name='description' content='' />
	<title></title>

<style>
.cycle-slideshow {
	outline: 2px dashed red;
	width: 800px;
	max-width: 100%;
}
.cycle-slideshow > div {width: 100%}

img {
	display: block;
	height: auto !important;
	max-width: 100%;
}

#prev, #next {
    float: left;
    margin: 20px;
    outline: 1px dashed blue;
    width: 100px;
}

#kittycounter {float: left}

.disabled {opacity: .2}
</style>
</head>
<body>

<div class="cycle-slideshow"
	data-cycle-allow-wrap="false"
	data-slides=">div"
	data-cycle-fx="scrollHorz"
	data-paused="true"
    data-cycle-auto-height="calc"
	data-cycle-prev="#prev"
	data-cycle-next="#next"
	data-cycle-caption="#kittycounter"
	data-cycle-caption-template="Image {{slideNum}} of {{slideCount}}"
	>
	<div>
	   	<img src="http://placekitten.com/g/800/800" />
	   	<p>Slide 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div>
		<img src="http://placekitten.com/g/800/100" />
		<p>Slide 2. Quisque ultrices, elit nec aliquet lacinia, enim diam pellentesque lectus, eu bibendum arcu sem et mauris. Ut eget nibh non magna scelerisque eleifend. Aenean quis sapien a tellus elementum ultrices. Praesent sagittis placerat ipsum, a tempor magna porta ut. Duis id urna quis velit interdum vestibulum non eget eros. Donec sed augue non libero faucibus vulputate. Phasellus quis tellus lorem. Quisque ultrices, elit nec aliquet lacinia, enim diam pellentesque lectus, eu bibendum arcu sem et mauris. Ut eget nibh non magna scelerisque eleifend. Aenean quis sapien a tellus elementum ultrices. Praesent sagittis placerat ipsum, a tempor magna porta ut. Duis id urna quis velit interdum vestibulum non eget eros. Donec sed augue non libero faucibus vulputate. Phasellus quis tellus lorem.</p>
	</div>
</div>

<div class="slideshow-controls">
	<a href=# id="prev">Previous</a>
	<p id="kittycounter"></p>
	<a href=# id="next">Next</a>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset='utf-8' />
	<meta name="viewport" content="width=device-width">
	<meta name='description' content='' />
	<title></title>

	<style>
	.cycle-slideshow {
	outline: 2px dashed red;
	width: 800px;
	max-width: 100%;
	}
	.cycle-slideshow > div {width: 100%}

	img {
	display: block;
	height: auto !important;
	max-width: 100%;
	}

	#prev, #next {
	float: left;
	margin: 20px;
	outline: 1px dashed blue;
	width: 100px;
	}

	#kittycounter {float: left}

	.disabled {opacity: .2}
	</style>
	</head>
	<body>

	<div class="cycle-slideshow"
	data-cycle-allow-wrap="false"
	data-slides=">div"
	data-cycle-fx="scrollHorz"
	data-paused="true"
	data-cycle-auto-height="calc"
	data-cycle-prev="#prev"
	data-cycle-next="#next"
	data-cycle-caption="#kittycounter"
	data-cycle-caption-template="Image {{slideNum}} of {{slideCount}}"
	>
	<div>
	<img src="http://placekitten.com/g/800/800" />
	<p>Slide 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div>
	<img src="http://placekitten.com/g/800/100" />
	<p>Slide 2. Quisque ultrices, elit nec aliquet lacinia, enim diam pellentesque lectus, eu bibendum arcu sem et mauris. Ut eget nibh non magna scelerisque eleifend. Aenean quis sapien a tellus elementum ultrices. Praesent sagittis placerat ipsum, a tempor magna porta ut. Duis id urna quis velit interdum vestibulum non eget eros. Donec sed augue non libero faucibus vulputate. Phasellus quis tellus lorem. Quisque ultrices, elit nec aliquet lacinia, enim diam pellentesque lectus, eu bibendum arcu sem et mauris. Ut eget nibh non magna scelerisque eleifend. Aenean quis sapien a tellus elementum ultrices. Praesent sagittis placerat ipsum, a tempor magna porta ut. Duis id urna quis velit interdum vestibulum non eget eros. Donec sed augue non libero faucibus vulputate. Phasellus quis tellus lorem.</p>
	</div>
	</div>

	<div class="slideshow-controls">
	<a href=# id="prev">Previous</a>
	<p id="kittycounter"></p>
	<a href=# id="next">Next</a>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
	<script src="http://malsup.github.com/jquery.cycle2.js"></script>

	</body>
	</html>