A pop-up preventing a JS file from loading

Question

I just implemented a items slider on my website. I used a free hosting service (000webhost) to put my website online so that I will be able to test it on different devices. What I noticed is that, when you open my website (Link to my website) for the first time, a pop-up coming from the free hosting service will be displayed:

And after closing the pop-up, the items slider looks like this, which is not normal:

Then you need to refresh the page, and when there is no pop-up, you will see the normal display:

Any time the slider is not normally displayed, the slider does not work perfectly. I think that the pop-up is preventing the loading of certain of my JavaScript files.

This is the code concerning the items slider:

<div class="clearfix">
			<h1>Femme <span>Les articles feminins viennent à vous</span></h1>
		</div>
		
		<div class="main">
			<div id="mi-slider" class="mi-slider">
				<ul>
					<li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
					<li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
					<li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
					<li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
				</ul>
				<ul>
					<li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Belts</h4></a></li>
					<li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Hats &amp; Caps</h4></a></li>
					<li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
					<li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
				</ul>
				<ul>
					<li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Casual</h4></a></li>
					<li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
					<li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Sport</h4></a></li>
				</ul>
				
				<nav>
					<a href="#">Chaussures</a>
					<a href="#">Acccesoires</a>
					<a href="#">Vêtements</a>
				</nav>
			</div>
		</div>
	</div><!-- /container -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="js/jquery.catslider.js"></script>
	<script>
		$(function() {

			$( '#mi-slider' ).catslider();

		});
	</script>

Please help me know how I can solve this problem that I am facing. Thanks in advance.

Answer 1

I cannot check it on your added snippet. But what I am guessing is there is a conflict between two jQuery versions. Try adding the blow line at the top of your jQuery code event before ready() function.

$.noConflict();

Also notice in the image that there are two jQuery versions loading.

First time:

Second time:

More information in jQuery website