Custom slideshow not loading

I am having troubles troubleshooting a custom slideshow I have built. I using Flexslider from woocommerce and have included the following in my funtions.php:

/*Some Set-up*/
define('EFS_PATH', dirname( get_bloginfo('stylesheet_url') ). '/FlexSlider'.'/' );
define('EFS_NAME', "Envato Flex Slider");
define ("EFS_VERSION", "1.0");

	/*Add the Javascript/CSS Files!*/
	function my_add_scripts() {
		wp_enqueue_script('flexslider', EFS_PATH.'jquery.flexslider-min.js', array('jquery'));
	}
	add_action('wp_enqueue_scripts', 'my_add_scripts');

	function my_add_styles() {
			wp_enqueue_style('flexslider', EFS_PATH.'flexslider.css');
	}
	add_action('wp_enqueue_scripts', 'my_add_styles');

/*Add the Hooks to place the javascript in the header*/
function efs_script(){
	print '<script type="text/javascript">
		$(window).load(function() {
			$(\'.flexslider\').flexslider();
		});
	</script>';
}
add_action('wp_head', 'efs_script');

and using on a page:

<div class="flexslider-container">
			<div class="flexslider">
				<ul class="slides">
					<?php
					//pages id
					$page_id = array('4', '2'); //stores multiple page ID in an array
					//render image for each page using foreach conditional loop
					foreach($page_id as $id){
						if (has_post_thumbnail($id) ):
							$image = wp_get_attachment_image_src( get_post_thumbnail_id($id), 'single-post-thumbnail' );
						endif;
						echo '<li>';
						echo '<img class="featured-img" src="'.$image[0].'">';
						echo '</li>';
					} ?>
				</ul>
			</div>
		</div>

but the images are not showing even though they are visible in browser page code view. It might be a conflict with one of my jquery and I cannot pinpoint it. I need to fix this because all my layout depend on the slideshow.
Thanks for helping me figure it out. The site is https://mongage.com/