bxslider.js loading gif on thumbs

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css">
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
		<section id="section1">
			<div class="sliderContainer">
                <ul class="mainSlider">
                    <li><img src="http://dummyimage.com/800x350/cf7692/FFFFFF&text=slide+one">
					</li>
					<li><img src="http://dummyimage.com/800x350/77d1bc/FFFFFF&text=slide+two">
					</li>
					<li><img src="http://dummyimage.com/800x350/a8cf78/FFFFFF&text=slide+three">
					</li>
				</ul>
				<div id="bx-pager">
					<a data-slide-index="0" href="" class="wow bounceIn" data-wow-delay=".6s"><img src="http://dummyimage.com/800x350/cf7692/FFFFFF&text=thumb+one"></a>
					<a data-slide-index="1" href="" class="wow bounceIn" data-wow-delay=".7s"><img src="http://dummyimage.com/800x350/77d1bc/FFFFFF&text=thumb+two"></a>
					<a data-slide-index="2" href="" class="wow bounceIn" data-wow-delay=".8s"><img src="http://dummyimage.com/800x350/a8cf78/FFFFFF&text=thumb+three"></a>
				</div>
			</div>
		</section>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body {text-align: center; font-family: 'open sans'; position:relative; margin:0; padding:0; background-color:#2c3e50;}

#section1 {width:100%; margin:0px auto; padding:40px 0; display:block; position:relative; overflow:hidden;}
.sliderContainer {max-width:800px; margin:0px auto; text-align:center; padding:0px;}
.mainSlider {}
.mainSlider img {width:800px; height:auto; margin:0px auto;}

/* hide controls on hover */
.bx-controls-direction a {opacity:0; transition:opacity .25s ease-in-out; -moz-transition:opacity .25s ease-in-out; -webkit-transition:opacity .25s ease-in-out;}
.bx-wrapper:hover .bx-controls-direction a {opacity:1;}
	
/* custom pager */
#bx-pager {}
#bx-pager img {width:25%; margin:1.6%;}
#bx-pager a:hover img, #bx-pager a.active img {border:1px solid #FFD95F; opacity:1; padding:4px;}
#bx-pager a img {border:1px solid transparent; opacity:.3; padding:4px;}

/* default overrides */
.bx-wrapper {position:relative; margin:0 auto; padding:0; *zoom:1; z-index:4;}
.bx-wrapper img {max-width:100%; display:block;}
.bx-wrapper .bx-viewport {-webkit-box-shadow:none; box-shadow:none; border:none; background:transparent;}

JavaScript

$(document).ready(function() {
	$('.mainSlider').bxSlider({
		mode: 'horizontal',
		preloadImages: 'all',
		speed: 750,
		infiniteLoop: true,
		adaptiveHeight:true,
		captions: true,
		video: false,
		responsive: true,
		pager: true,
		pagerCustom: '#bx-pager',
		pagerType: 'full',
		controls: true,
		auto: true,
		pause: 2000,
		autoStart: true,	
		autoHover: true,
		autoDelay: 2000,
		onSliderLoad: function(){
		},
		stopAuto:false,
		onSlideBefore: function(){
		},
		onSlideAfter: function($slideElement, oldIndex, newIndex){
  //  alert('oldIndex');
		},
	});
});