Cacher is the code snippet organizer for pro developers

*******the mf html******


<div class="hero" id="heroslide">


</div><!--end.hero-->



***********the css**************

.hero{
	  margin: 0;
	  background-size: cover;
	  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-lonely.jpg") no-repeat center center fixed;
	  background-blend-mode: darken;
	  transition: 3s;
		height:500px;
 }

*******the ACF Repeater*********

<?php

			$basePath = "";

					if( have_rows('background_slider') ):

							while ( have_rows('background_slider') ) : the_row();

									$imgURl = get_sub_field('background_image');
									$sliderImg[] = $imgURl;

							endwhile;

					endif;

		?>

*****the js***************

var bgImageArray = ["lonely.jpg", "uluwatu.jpg", "carezza-lake.jpg", "batu-bolong-temple.jpg"],
base = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-",
secs = 4;
bgImageArray.forEach(function(img){
		new Image().src = base + img;
		// caches images, avoiding white flash between background replacements
});

function backgroundSequence() {
	window.clearTimeout();
	var k = 0;
	for (i = 0; i < bgImageArray.length; i++) {
		setTimeout(function(){
			document.getElementById('heroslide').style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
			document.getElementById('heroslide').style.backgroundSize ="cover";
		if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }
		}, (secs * 1000) * i)
	}
}
backgroundSequence();


******js with conditional screen size statement*************
//slider to fire above 780px
if (screen.width >= 780) {
				//convert php array to JS array
				var bgImageArray = <?php echo json_encode($sliderImg); ?>;
				//set our basepath
				base = "<?php echo $basePath ?>",
				secs = 4;
				//caches images, avoiding white flash between background replacements
				bgImageArray.forEach(function(img){
						new Image().src = base + img;
				});

				function backgroundSequence() {
					window.clearTimeout();
					var k = 0;
					for (i = 0; i < bgImageArray.length; i++) {
						setTimeout(function(){
							document.getElementById('heroslide').style.background = "url(" + base + bgImageArray[k] + ") no-repeat top center fixed";
							document.getElementById('heroslide').style.backgroundSize ="cover";
						if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 2000))} else { k++; }
					}, (secs * 2000) * i)
					}
				}
				backgroundSequence();
//dont use slider on mobile and set background image
			} else if (screen.width <= 779) {
					document.getElementById('heroslide').style.background = "url('images/mobile-back.jpg') no-repeat";
					document.getElementById('heroslide').style.backgroundSize ="contain";
			}
			
			****** NEEDS REFACTORING js with conditional screen size statement v2*************
			<script>
				//convert php array to JS array
				var bgImageArray = <?php echo json_encode($sliderImg); ?>;
				//set our basepath
				base = "<?php echo $basePath ?>",
				secs = 4;
				//caches images, avoiding white flash between background replacements
				bgImageArray.forEach(function(img){
						new Image().src = base + img;
				});



			if (screen.width >= 780) {

				function backgroundSequence() {
					window.clearTimeout();
					var k = 0;
					for (i = 0; i < bgImageArray.length; i++) {
							setTimeout(function(){
								document.getElementById('heroslide').style.background = "url(" + base + bgImageArray[k] + ") no-repeat top center fixed";
								document.getElementById('heroslide').style.backgroundSize ="cover";
							if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 2000))} else { k++; }
						}, (secs * 2000) * i)
					}
				}
				backgroundSequence();

			} else if (screen.width <= 779) {

				function backgroundSequence() {
					window.clearTimeout();
					var k = 0;
					for (i = 0; i < bgImageArray.length; i++) {
							setTimeout(function(){
								document.getElementById('heroslide').style.background = "url(" + base + bgImageArray[k] + ") no-repeat top center fixed";
								document.getElementById('heroslide').style.backgroundSize ="contain";
								document.getElementById('heroslide').style.backgroundAttachment ="scroll";
							if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 2000))} else { k++; }
						}, (secs * 2000) * i)
					}
				}
				backgroundSequence();
				// document.getElementById('heroslide').style.background = "url('images/mobile-back.jpg') no-repeat";


			}
		</script>