自定義滑塊不工作

我遇到了我製作的滑塊問題，我需要它，以便在下一個div出現在屏幕頂部的div上時，看起來很流暢，如果你看看我的jsfiddle你會看到它在底部，然後跳到頂端... http://jsfiddle.net/Gfzwp/自定義滑塊不工作

如果你能幫助我，這將是偉大的，謝謝！

HTML

<div class="section"> 
     <div class="controls"> 
      <div class="next"><span class="hidden">Next</span></div> 
     </div> 
     <div class="gallery" id="one"> 
      <div class="box">one</div> 
      <div class="box">two</div> 
      <div class="box">three</div> 
     </div> 
     <div class="gallery" id="two"> 
      <div class="box">one</div> 
      <div class="box">two</div> 
      <div class="box">three</div> 
     </div> 
    </div>

CSS

.section { 
     width:100%; 
     overflow:hidden; 
     white-space:nowrap; 
    } 

    .gallery { 
     width:100%; 
     min-height:450px; 
     display:inline-block; 
     top:0; 
     white-space:normal; 
     float:left; 
     padding:0px 0px 200px 49px; 
    } 

    .box { 
     width:200px; 
     height:200px; 
     background:#ff0000; 
     float:left; 
     margin:0px 3px 3px 0px;  
    } 

    .controls { 
     position:absolute; 
     z-index:3; 
    } 

    .controls .next { 
     width:44px; 
     height:133px; 
     margin:0px 0px 0px 2px; 
     cursor:pointer; 
    } 

jQuery  
$('.controls .next').click(function(){ 
    $('.gallery#one').hide('slide', { direction: "left" }, 1000); 
    $('.gallery#two').show('slide', { direction: "right" }, 1000); 
});

來源

2012-09-10 green_arrow

按照這個網站的指南，你應該提供相應的代碼片段，即使你有一個小提琴。你必須想象，如果jsfiddle.net突然消失，這個問題仍然可以解決。 –

對不起，我已經添加了代碼片段。通常，當我提供它們時，我會被要求提供一個jsfiddle，我將在未來提供:) –

添加position:absolute到畫廊CSS。

更新小提琴：http://jsfiddle.net/johnkoer/Gfzwp/5/

來源

2012-09-10 14:46:23

-1您是否測試了代碼？ http://jsfiddle.net/Gfzwp/7/ –

我不能添加位置：絕對沒有定義一個高度的畫廊股利，我不想定義一個高度，因爲我想箱子相互之間移動爲瀏覽器被縮放。 –

自定義滑塊不工作

回答

相關問題