jcadima
9/20/2016 - 7:47 PM

Flexslider captions Middle of image

Flexslider captions Middle of image


<?php
$banner_images = array() ;
$banner_button = array();
	  
if( have_rows('home_gallery') ): 
 while( have_rows('home_gallery') ): the_row(); 
	$banner_images[] = get_sub_field('banner_image');
	$banner_button[] = get_sub_field('banner_button');
endwhile; endif;

?>



<div class="flexslider">
  <ul class="slides">
	 <?php 
		 $i = 0;	
		 foreach ( $banner_images as $banner_image ) : ?>
	    <li>
	     <img src="<?php echo $banner_image ; ?>">
	     <div class="flex-caption">
		     <div class="banner_title"><?php echo $banner_button[$i] ;  ?></div>
	     </div>
	    </li>
	 <?php $i++; endforeach;  ?>  
  </ul>
</div>	











<style>

.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
    position: relative;
}

.flex-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
    padding: 10px;
    opacity: 1;
    text-align: center;
    color: #fff !important;
}  
  
</style>