파운데이션 4로 컨테이너 외부에서 궤도 이동 화살표를 이동하는 방법은 무엇입니까?

Question

궤도를 사용하여 일부 텍스트 무거운 요소를 표시하고 화살표가 내 텍스트의 길을 방해하고 있습니다. 나는 OSS9를 위해 파이어 폭스에서 올바르게 보일 필요가 있기 때문에 투명도를 높이기 위해 환상적인 css33을 수행하는 것에 지치고있다. 나는 파이어 폭스 3를 의미한다고 생각한다 ...

그래서 나는 그저 움직일 수있는 방법이있다. 궤도의 컨테이너 바깥 쪽 화살표? 컨테이너 아래에 전 화살표가 있고 총알이 있고 다음 화살표가 있으면 더 좋을까요?

Answer 1

그래서 Orbit의 컨테이너 외부로 화살표를 움직일 수있는 방법이 있습니까? 컨테이너 아래에 내가 이전에 화살을 가지고 있다면 더 좋을 것입니다. 그러면 총알, 그 다음 화살?

언제나 방법이 있으며 때로는 쉽지 않습니다. 그리고 당신의 특별한 시나리오를 위해서 당신이 자바 스크립트에 아주 능숙하다면 그것은 쉽게 될 것입니다. 4.1.5 인 최신 버전에서 이벤트 처리 또는 콜백은 여전히 ​​지원되지 않습니다. 그들이

이 수정 될 원하는 장소에있는 화살표를 쓸 수 있도록

1. 스크립트 파일을 수정 : 당신이 다음 필요에 대한 지원을 원하는 경우에 당신은 정말 foundation.orbit.js을 수정하고 두 가지가해야 할 스크립트 파일이므로 다음 이벤트에 연결할 수 있습니다. 및 이전 작업. 그런 다음 이전 버튼과 다음 버튼을 추가하여 원하는 위치에 배치 할 수 있습니다.

바로 지금 바로 할 수있는 방법이 없습니다. 실제로 콜백에 대한 지원을 가능하게하는 코드를 제공하기 위해 노력하고 있습니다. 그런 다음 Zurb (github)에 제출하여 핵심 스크립트에 통합하는 것이 타당한 지 확인하십시오.

Answer 2

이 또한 mouseenter를하는 MouseLeave를 사용하여 사용하고 애니메이션

$(document).ready(function() { 
     $(".orbit-container").mouseenter(function() { 
      $(".orbit-prev,.orbit-next").stop().animate({ 'opacity': '1' }, 400); 
     }).mouseleave(function() { 
      $(".orbit-prev,.orbit-next").stop().animate({ 'opacity': '0' }, 400); 
     }); 
    }); 

Answer 3

나는 최근에 당신이 무슨 말을하는지 같은 것을 (나는 생각한다) 않았다 전에 멈출 수 있습니다. 내 슬라이드의 특정 열 너비로 컨테이너를 설정하고 궤도 주위에 컨테이너가 없으면 자연스럽게 궤도가 페이지의 100 %를 차지합니다.

각 슬라이드마다 이렇게했습니다. 여기에 마크 업이 추가되었지만 슬라이드의 미디어 쿼리를보다 잘 제어 할 수 있어야했습니다.

<div class="slideshow-wrapper"> 
    <ul id="home-slider" data-orbit data-options="timer_speed:2500; bullets:false;"> 
     <li data-orbit-slide="headline-1"> 
     <div class="row"> 
      <div class="large-10 column push-1"> 
      <div class="slider-content"> 
       <div class="large-6 column text-center text-left"> 
       <h2>Test</h2> 
       <h3>Test</h3> 
       <p>Test</p> 
       <a href="" class="large secondary button expand">LEARN MORE</a> 
       </div> 
      </div> 
      </div> 
     </div> 
     </li> 
    </ul> 
    </div> 

그러니 그냥 궤도의 용기의 외부에있는 화살표를 이동시킬 수있는 방법 I가? 컨테이너 아래에 내가 이전에 화살을 가지고 있다면 더 좋을 것입니다. 그러면 총알, 그 다음 화살?

나는 이것도 분만에 고민했다. 3064-3076 행의 이전/다음 버튼에 대한 CSS를 찾을 수있다. 상위 속성을 80 % +로 설정하여 이전 및 다음 화살표를 아래쪽으로 밀면 볼 수 있습니다.

Answer 4

이것은 CSS로 할 수 있습니다. 기본적으로 overflow : hidden은 .orbit-container에 있습니다. .orbit-container overflow : visible을 선택한 다음 overflow : hidden을 the에 추가하십시오.궤도 슬라이드 컨테이너의 경우 슬라이드는 여전히 숨겨져 있지만 UL 외부의 모든 항목은 원하는 곳으로 이동할 수 있습니다. 다음은 내가 한 일입니다.

.orbit-container { 
    overflow: visible !important; 
} 
.orbit-slides-container { 
    overflow: hidden !important;  
} 
.orbit-container .orbit-prev { 
    margin-left: -50px; 
} 
.orbit-container .orbit-next { 
    margin-right: -50px; 
}