Dynamically customize Slick Slider dots style depending on index of loop.

slick-slide-loop-custom-dots.php

<?php

function tower_do_single_product_variation_preview_images()
{
	global $post;

	$variations = get_field( 'product_variation' );

	?>
	<div id="productVariationDotsContainer">
	<?php

	foreach ( $variations as $key => $variation ) {

		$image = $variation['product_variation_preview_image'];
		$index = $key;

		if ( empty( $image ) ) {
			continue;
		}

		if ( $index < 10 ) {

			$index = '0' . strval( $index );
		}
		?>
		<style type="text/css">
			#productVariationDotsContainer #slick-slide<?php echo $index; ?> button {
				background-image: url( <?php echo $image['sizes']['tower-acf-product-variation-preview']; ?> );
			}
		</style>
		<?php
	}

	?>
	</div>
	<?php
}