2012-11-09 2 views
0

궤도 슬라이더와 함께 기초 프레임 워크를 사용하려고 시도했으며 브라우저에서 테스트했을 때 슬라이더가 전환을 수행하지만 애니메이션은 수행되지 않고 단순히 1에서 사라집니다 섹션을 다른 섹션으로 이동하십시오.기초 프레임 워크 궤도가 슬라이드간에 올바르게 애니메이션되지 않음

창 크기를 조정하려고 할 때만 예상대로 작동합니다.

추가 검사를 한 후 슬라이더가 '가로 누름'을 사용하여 변경하려고하면 외경 슬라이드 div의 this.outerWIdth 변수가 div의 실제 너비 대신 1이됩니다.

여기는 궤도를 사용하고있는 기능 슬라이더에 대한 마크 업입니다.

<div id="features-wrap" class="wrapper"> 
      <!-- Insert Features Here --> 
      <div id="features-gutter" class="row"> 
       <section id="features" class="row"> 
        <div id="welcome"> 
         <div class="eight columns"> 
          <h4>Welcome</h4> 
          <p>Hello.</p> 
         </div> 
         <div class="four columns"> 
          <img src="img/content/promo1.jpg" alt="Promo Image 1" width="320" height="220"> 
         </div> 
        </div> 
        <div id="decorated"> 
         <div class="eight columns"> 
          <h4>Decorated Apparel</h4> 
          <p>Some Text</p> 
         </div> 
         <div class="four columns"> 
          <img src="img/content/promo2.jpg" alt="Promo Image 1" width="320" height="220"> 
         </div> 
        </div> 
        <div id="promotional"> 
         <div class="eight columns"> 
          <h4>Protional Products</h4> 
          <p>Some Text</p> 
         </div> 
         <div class="four columns"> 
          <img src="img/content/promo3.jpg" alt="Promo Image 1" width="320" height="220"> 
         </div> 
        </div> 
       </section> 
      </div> 
      <!-- End Insert Features Here --> 
     </div> 

끝 코드 여기에 제가 부르고있는 자바 스크립트도 있습니다.

var featuresSlider = $('#features'); 
featuresSlider.orbit({fluid: '2x1', animationSpeed: 650, animation: 'horizontal-push' }); 

코드로 수행중인 작업이 있습니까? 아니면 현재 궤도 스크립트의 버그입니까?

감사합니다.

답변

0

답을 찾았습니다. 슬라이더가 오른쪽 outerWidth를 얻으려면 슬라이더를 초기화하고 CSS 파일의 플러그인에서 설정된 너비를 초과하는 div로 이동해야했습니다. 예를 들어 기능이 제 궤도 슬라이더를 제어 할 경우 다음, 나는이 작업을 수행해야합니다

#features { 
    width: <set the width here> !important; 
    <any other styles here> 
} 

감사를

관련 문제