Zurb Orbig Slider 콘텐츠 이미지 겹침

Question

그리드 내에서 하나의 이미지가 다른 모든 것 위에 표시됩니다. 솔직히 이유를 모르며 도움이 필요합니다.

페이지를로드하는 동안 만 발생합니다.

내가 Zurb 재단 궤도 슬라이더를 사용하고 있는데 내 페이지가이 같은 섹션 길게

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') 
    }); 
}); 

모든 : 슬라이딩 부분을 설정해야

<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><a href="http://wazzup.wedoitforfun.org/" target="_blank" class="sb xlarge flat glossy wazzup"></a></li> 
         <li><a href="#" class="sb xlarge flat glossy light-gray nAppIcon"></a></li> 
         <li><a href="#" class="sb xlarge flat glossy light-gray eAppIcon"></a></li> 
         <li><a href="#" class="sb xlarge flat glossy light-gray wAppIcon"></a></li> 
         <li><a href="#" class="sb xlarge flat glossy light-gray aAppIcon"></a></li> 
         <li><a href="#" class="sb xlarge flat glossy light-gray pAppIcon"></a></li> 
         <li><a href="#" class="sb xlarge flat glossy light-gray pAppIcon"></a></li> 
         <li><a href="#" class="sb xlarge flat glossy light-gray sAppIcon"></a></li> 
        </ul> 
       </div> 
       <div class="content"> 
        <ul class="block-grid four-up"> 
         <li><a href="#" class="sb xlarge flat light-gray glossy about"></a></li> 
         <li><a href="http://www.scoop.it/t/tooltip" target="_blank" class="sb xlarge flat light-gray glossy tooltip"></a></li> 
         <li><a href="http://www.scoop.it/t/innovatus" target="_blank" class="sb xlarge flat light-gray glossy innovatus"></a></li> 
         <li><a href="http://whereismycode.pintolaranja.com" target="_blank" class="sb xlarge flat light-gray glossy whereismycode"></a></li> 
         <li><a href="http://scrumplicity.net" target="_blank" class="sb xlarge flat light-gray glossy scrumplicity"></a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div class="two columns"> 
     </div>   
    </div> 
</section> 

자바 스크립트는이입니다 내가 얻는 시간은 첫 번째 격자의 두 번째 이미지가 두 번째 격자의 두 번째 이미지로 대체된다는 것입니다. 의미, nAppIcon이 표시되지 않는 페이지를로드 할 때 툴팁 아이콘이 표시됩니다.

그런 다음 슬라이더의 화살표를 클릭하여 탐색하면 모든 것이 사라지고 모든 아이콘이 더 이상 겹치지 않는 적절한 위치에 영원히 남습니다.

Answer 1

좋아, 여기에 답이 나와 있습니다. 그다지 좋아하지는 않지만 효과가 있습니다. 기본적으로

나는 숨겨진에 하단 슬라이드를 설정 한 다음 같은 것을 수행

$(".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();   
    } 
}); 

을