OrbitSlider.php

<div id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class_name ); ?> orbit" role="region" aria-label="ORBIT CAROUSEL ARIA LABEL" data-orbit data-options="animInFromRight:fade-in; animOutToLeft:fade-out;">
	<div class="orbit-wrapper">
		<ul class="orbit-container">
			<?php
			if ( have_rows( 'orbit_slides' ) ) :
				while ( have_rows( 'orbit_slides' ) ) :
					the_row();

					// VARS
					$bgimg 			= get_sub_field( 'slide_image' );
					$size 			= 'bigslide';
					$heading 		= get_sub_field( 'slide_heading' );
					$quote 			= get_sub_field( 'quotation' );
					$name 			= get_sub_field( 'persons_name' );
					$job 			= get_sub_field( 'persons_role' );
					$highlight 		= get_sub_field( 'persons_highlight' );
			?>

				<li class="orbit-slide" style="background-image: url(<?php echo esc_url( wp_get_attachment_image_url( $bgimg['id'], $size ) ); ?>);">
					<div class="slideContent">
						<h3><?php echo esc_attr( $heading ); ?></h3>
						<p class="storyQuote"><?php echo esc_attr( $quote ); ?></p>
						<p class="storyName"><?php echo esc_attr( $name ); ?></p>
						<p class="storyJob"><?php echo esc_attr( $job ); ?></p>
						<p class="storyHigh"><?php echo esc_attr( $highlight ); ?></p>
					</div>
				</li>

			<?php
			endwhile;
			endif;
			?>

		</ul>

		<nav class="orbit-bullets">
			<?php
			if ( have_rows( 'orbit_slides' ) ) :
				$i = 0;
				while ( have_rows( 'orbit_slides' ) ) : the_row();
		?>
			<button data-slide="<?php echo esc_attr( $i++ ); ?>"></button>
		<?php
				endwhile;
			endif;
		?>
		</nav>
			  
	</div>
</div>