Zurb Orbig Slider Content Overlapping an Image - image

Question

It is a single image within a grid that comes on top of all others, I honestly do not know why and need some help.
It is something that only happens while loading the page.
I'm using Zurb Foundation Orbit slider and my page hold a section like this:
<section class="container">
<div class="row">
<div class="two columns">
</div>
<div class="eight columns">
<div id="featured">
<div class="content">
<ul class="block-grid four-up">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="content">
<ul class="block-grid four-up">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="two columns">
</div>
</div>
</section>
The javascript responsible for setting up the sliding part is this:
jQuery(document).ready(function ($) {
$("#featured").orbit({
animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 800, // how fast animtions are
timer: false, // true or false to have the timer
advanceSpeed: 4000, // if timer is enabled, time between transitions
pauseOnHover: false, // if you hover pauses the slider
startClockOnMouseOut: false, // if clock should start on MouseOut
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
directionalNav: true, // manual advancing directional navs
captions: true, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 800, // if so how quickly should they animate in
bullets: false, // true or false to activate the bullet navigation
bulletThumbs: false, // thumbnails for the bullets
bulletThumbLocation: '', // location from this file where thumbs will be
afterSlideChange: function(){}, // empty function
fluid: '640x320' // or set a aspect ratio for content slides (ex: '4x3')
});
});
All the time what I get is the second image on the first grid being replaced by the second image on the second grid.
Meaning, when I load the page the nAppIcon doesn't show, instead the tooltip icon shows.
Then, if I click the arrows on the slider to navigate, all this disappears and all the icons are forever in proper place not overlapping anymore.

Answer 1

Ok, here is the answer I found.
Don't like it that much, but it worked.
By default I set the lower slide to hidden, and then do something like this:
$(".right").click(function(){
if ($("#infoPanel").is(':hidden')){
$("#appsPanel").hide();
$("#infoPanel").show();
}
else{
$("#infoPanel").hide();
$("#appsPanel").show();
}
});
$(".left").click(function(){
if ($("#infoPanel").is(':hidden')){
$("#appsPanel").hide();
$("#infoPanel").show();
}
else{
$("#infoPanel").hide();
$("#appsPanel").show();
}
});