Jquery Cycle - 顯示多個div

Question

只需使用Jquery Cycle插件，我有一個允許用戶滾動框中的類別列表的框。但我似乎無法找到一種方法讓Jquery Cycle一次顯示多個框，允許用戶向上或向下滾動以顯示更多框。

下面是HTML：

<div id="themeSearch"> 
    <h1 class="mainSectionHeader">By Theme</h1> 
    <div class="scrollUp eventSearchScroll"><a href="#" id="prev6"><img src="<?php bloginfo('template_directory'); ?>/images/scrollUp.png" alt="Scroll Up" /></a></div> 
    <div id="themeSelector"> 
     <div class="themeItem"><p><span>On foot<span></p><a href="#"><span>Go</span></a></div> 
     <div class="themeItem"><p><span>Vintage Coach<span></p><a href="#"><span>Go</span></a></div> 
     <div class="themeItem"><p><span>Helicopter<span></p><a href="#"><span>Go</span></a></div> 
     <div class="themeItem"><p><span>Boat<span></p><a href="#"><span>Go</span></a></div> 
    </div> 
    <div class="scrollDown eventSearchScroll"><a href="#" id="next6"><img src="<?php bloginfo('template_directory'); ?>/images/scrollDown.png" alt="Scroll Down" /></a></div> 
</div> 

...的CSS：

#themeSearch { 
    background: url(../images/bgRed.png) top left repeat; 
    width: 275px; 
    height:346px; 
    padding: 15px; 
    float: left; 
    margin: 0 20px; 
} 
#themeSelector { 
    height:216px; 
} 
.themeItem { 
    width: 100%; 
    height: 35px; 
    border: 1px solid #6e060a; 
    clear: both; 
    margin: 19.5px 0; 
} 

...和JS：

jQuery(document).ready(function() { 
    jQuery('#themeSelector').cycle({ 
    fx:  'scrollUp', 
    timeout: 6000, 
    delay: -2000 , 
    next: '#next6', 
    prev: '#prev6' 
}); 
}); 

在這種特殊情況下，我想一次顯示4個'themeItems'，允許用戶上下滾動顯示更多。

感謝

Answer 1

聽起來更像是你需要使用類似的jCarousel

http://sorgalla.com/projects/jcarousel/

Answer 2

jQuery的週期只能一次顯示一個「幻燈片」，你可以模擬你想要做雖然什麼通過把內容的多個項目（例如三個或四個圖像）成一張幻燈片。這樣你就可以一次顯示3或4張圖片，當容器循環時，你會得到3-4張圖片的下一張幻燈片。

Answer 3

你可能也想嘗試：

http://www.gmarwaha.com/jquery/jcarousellite/

在那裏你可以指定visbility：

visible: 2

要顯示2圖像

Answer 4

它可以完成。 http://jquery.malsup.com/cycle/div.html

週期腳本開始於導航元素（一個或多個），例如：

<div style="margin:auto;text-align:center"><div id="nav"></div></div>

和與滑動DIV繼續：

`<div class="slideshow"> 
    <div class="slide"> 
     <img src="http://jquery.malsup.com/cycle/images/beach1.jpg" width="200" height="200" /> 
     <img src="http://jquery.malsup.com/cycle/images/beach2.jpg" width="200" height="200" /> 
     <img src="http://jquery.malsup.com/cycle/images/beach3.jpg" width="200" height="200" /> 
    </div> 
    <div class="slide"> 
     <img src="images/beach4.jpg" width="200" height="200" /> 
     <img src="images/beach5.jpg" width="200" height="200" /> 
     <img src="images/beach6.jpg" width="200" height="200" /> 
    </div> 
    <div class="slide"> 
     <img src="http://jquery.malsup.com/cycle/images/beach7.jpg" width="200" height="200" /> 
     <img src="http://jquery.malsup.com/cycle/images/beach8.jpg" width="200" height="200" /> 
     <img src="http://jquery.malsup.com/cycle/images/beach9.jpg" width="200" height="200" /> 
    </div> 
</div>` 

類= '滑動' 的div slpit可滾動的內容...

唯一缺少的是適當的CSS來定義e滑動區域和導航鏈接

`#nav { margin: 20px auto } 
#nav a { padding: 4px 6px; margin: 3px; border: 1px solid #ccc; text-align: center; text-decoration: none; background-color: #ddd } 
#nav a.activeSlide { color: #c00 } 
#nav a:focus { outline: none; } 

.slideshow { margin: 20px auto; padding: 0; clear: left; } 
.slide { margin: 0; padding: 0 } 
.slideshow, .slide { height: 232px; width: 710px; }` 

它爲我工作就像一個魅力。