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 个“主题项”，允许用户上下滚动以显示更多内容。

谢谢

Answer 1

听起来你需要使用类似 jCarousel 的东西

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

Answer 2

jQuery 循环一次只能显示一个“幻灯片”，但您可以通过将多个内容项（例如三个或四个图像）放入单个幻灯片来模拟您正在尝试做的事情。这样一来，您将一次显示 3 或 4 张图片，当容器循环时，您将获得下一张幻灯片，其中包含 3-4 张图片。

Answer 3

你可能想试试：

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

您可以在哪里指定可见性：

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>`

class='slide' div 分割可滚动内容...

唯一缺少的是定义滑动区域和导航链接的适当 css

`#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; }`

它对我很有用。