<html>
  <head>
    <title>FlexSlider - Mixed Heights Demo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	
	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.1/flexslider-min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.1/jquery.flexslider.js"></script>
	
	<!--
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.js"></script>
	-->
	
  </head>
  <body>
	<div id="top-content" style="width:300px;height:auto;">
		<div class="flexslider">
			<ul class="slides">
				<li>
					<!-- Slide 1 -->
					<img src="https://placehold.it/300x200" />
				</li>
				<li>
					<!-- Slide 2 -->
					<img src="https://placehold.it/300x400" />
				</li>
				<li>
					<!-- Slide 3 -->
					<img src="https://placehold.it/300x200" />
				</li>
				<li>
					<!-- Slide 4 -->
					<img src="https://placehold.it/300x200" />
				</li>
			</ul>
		</div>
	</div>
  
  <div id="bottom-content"><p>This content appears below the FlexSlider. It will get moved around if the FlexSlider contains images of varying heights - see what happens when it gets to slide 2<p></div>
  
  <script>
  // Standard Init for FlexSlider
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
  </script>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.