<script>
	$('.fx-slider').cycle();
</script>

<!-- ############################################# -->
<!-- ############### SLIDER IMAGE ################ -->
<!-- ############################################# -->
<div class="fx-slider-image no-repeat back-pos-center contain w-100-p"  style="background-image:url(<?php echo get_field('fx_back'); ?>);" >
	<div class="fx-slider" 
		data-cycle-slides="> div"	
		data-cycle-fx="fade"
		data-cycle-reverse="false"
		data-cycle-timeout="3000"
		data-cycle-manual-speed="500"
		data-cycle-prev="#prev"
		data-cycle-next="#next"
		data-cycle-pager="#pager"
		data-cycle-pager-template="<a href=#>&nbsp;&nbsp;</a>"
		>
		<?php
		$i=0;
		while( have_rows('fx_slider') ) : the_row();
		?>
			<div class="fx-slider-image no-repeat back-pos-center contain w-100-p <?php if($i)echo 'dis-none"'; ?>"  style="background-image:url(<?php echo get_sub_field('image'); ?>);" ></div>
		<?php $i++; ?>
		<?php endwhile; ?>
	</div>
</div>

<script>
	var img = new Image();
	img.onload = function() {
		windowwidth=$(window).width();
		offset=this.width / this.height;
		new_height=(windowwidth/offset);
		$(".fx-slider-image").css({"height":new_height});
	}
	img.src = '<?php echo get_field('fx_back'); ?>';

	$(document).ready(function(){ 
		var loaded_offset =	$(".fx-slider-image").width() / $(".fx-slider-image").height();
	
		$(window).resize(function() {
			windowwidth=$(window).width();
			new_height=(windowwidth/loaded_offset);
			$(".fx-slider-image").css({"height":new_height});
		});
	});

</script>