How to use flexslider with multiple lines. (I used this code inside wordpress with the ACF gallery addon, but you can adapt it and use it anywhere you want)

gallery.php

<?php 
	// Custom field for the images
	$images = get_field('gallery_images');
	
	/**
	* The data returned from the $images variable is an array with the following items
	* 
	* Array (
	*	  [id] => 540
  	*	  [alt] => A Movie
  	*	  [title] => Movie Poster: UP
  	*	  [caption] => sweet image
  	*	  [description] => a man and a baloon
  	*	  [url] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
  	*	  [sizes] => Array (
  	*			[thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-150x150.jpg
	*			[medium] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-300x119.jpg
	*			[large] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
	*			[post-thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
	*			[large-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
	*			[small-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-500x199.jpg
	*		     )
	* )
	*
	*
	**/
	 
	// If $images is not empty, display the gallery
	if( $images ):
?>

<div class="img-gallery">
	<ul class="slides">

	<?php
		$i = 1; // The initial number to count from.
		$n = count($images); // The number of images inside the $images variable

		echo "<li>\n"; // First list item

		while ($i <= $n) { // While the counter is less or equal to the number of $images inside de variable

			foreach( $images as $image ) {
				// Get the image thumb
				$img_id		= $image['id'];
				$image_thumb	= wp_get_attachment_image_src( $img_id, array(227,216) );
				
				/**
				* The data returned from the wp_get_attachment_img_src ($image_thumb variable) is an array with the following items
				* 
				* Array (
				* 	[0] => url
				*	[1] => width
				* 	[2] => height
				*	[3] => boolean: true if $url is a resized image, false if it is the original.
				* )
				**/
				
				// Puts the image inside an anchor tag for lightbox interaction (data-lightbox)
			?>
				<a href="<?php echo $image['url']; ?>" data-lightbox="<?php the_title(); ?>">
					<img src="<?php echo $image_thumb[0]; ?>" />
				</a>

			<?php
				if ($i % 4 == 0 && $i != $n) { // If the number is a group of four and it's not the last number
					echo "</li>\n<li>\n"; // Closes the list item and opens a new one
				} else if ($i == $n) { // If it's the last one
					echo "</li>\n"; // Closes the list item
				}
				$i++; // Increments the counter
		}
	}
?>
	</ul><!-- /.slides -->
</div><!-- /.img-gallery -->
<?php endif; ?>

slider.js

// Flexslider init function

$('.img-gallery').flexslider({
	animation: "slide",	//String: Select your animation type, "fade" or "slide"
	controlNav: true,       //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
	pauseOnHover: true,     //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
	directionNav: true,     //Boolean: Create navigation for previous/next navigation? (true/false)
	animationLoop: false,
	slideshow: false,
	itemWidth: 960,
	move: 0,                //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
});