jQuery Scrollable Center Active Frame

我正在使用jQuery Tools Scrollable插件。我正在努力使活動框架位於屏幕的中心。jQuery Scrollable Center Active Frame

我將Scrollable包裝設置爲100％的寬度，它的工作效果很好，但活動框架與左側對齊。我想要的是以活動框架爲中心。爲了更好的解釋，請參閱我試圖實現的模型。

How do I center the active frame?

FYI：這是我的結構：

<div class="scrollable"> 
    <div class="prev browse left disabled"></div> 

    <div class="items"> 
     <div class="pane"> 
      Content 
     </div> 
     <div class="pane"> 
      Content 
     </div> 
    </div> 

    <div class="next browse left"></div> 
</div>

謝謝！

來源

2011-12-21 Drew Baker

不相關 - 但是那張照片是什麼？ – 2011-12-21 18:30:56

我想通了。您無法在.items上使用margin：0 auto，因爲.items太寬。 Umesh試圖通過提供一個寬度來解決這個問題，但這不是動態的。而且，jQuery Tools Scrollable仍然會嘗試將活動框架置於左側。

這是我做的。

我將可滾動設置爲瀏覽器的100％寬度。 .pane一直是800px寬。

然後我寫了這個JavaScript：

// Get window width 
var winWidth = jQuery(window).width(); 

// winWidth divided by 2, subtract half the width of .pane 
var itemsMargin = (winWidth/2)-400; 

// Resize the homepage scrollable panes 
jQuery('.scrollable .items').css('margin-left', itemsMargin+'px');

這具有積極.pane的百達在屏幕中央的中心。然後，我設置一個.resize（）回調函數來重新調整瀏覽大小時的左邊距。它很棒！

來源

2011-12-21 18:28:15

從我的假設，你可以嘗試把這個在CSS：

.items { margin:0 auto; }

來源

2011-12-21 07:59:57 Calvin

代碼加爾文的作品，但同樣也可能是更好，如果你的內容，你要顯示的提供近似寬度相片。因爲，除非我們給出左/右邊距，否則它會使項目位於中心。

.scrollable { 
    background-color: black; 
    width: 100%; 
} 
.items { 
    margin: 0 auto; 
    width: 400px; 
}

來源

2011-12-21 08:39:39

jQuery Scrollable Center Active Frame

回答

相關問題