Question

Just working with the Jquery Cycle plugin, and I have a box which allows users to scroll through a list of categories in boxes. But I can’t seem to find a way to allow Jquery Cycle to display more than one of the boxes at a time, allowing users to scroll up or down to reveal more boxes.

Here is the 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>

…the 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;
}

…and the js:

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

In this particular case, I want to show about 4 ‘themeItems’ at one time, allowing users to scroll up and down to reveal more.

Thanks

Answer 1

Sounds more like you need to use something like jCarousel

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