Jquery Cycle - affichage de plus d'un div

Question

Je travaille avec le plugin Jquery Cycle, et j'ai une boîte qui permet aux utilisateurs de faire défiler une liste de catégories dans des boîtes. Mais je n'arrive pas à trouver un moyen de permettre à Jquery Cycle d'afficher plus d'une case à la fois, permettant aux utilisateurs de faire défiler vers le haut ou vers le bas pour afficher plus de cases.

Voici le code 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> 

... le 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; 
} 

... et les js:

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

Dans ce cas particulier, je veux pour montrer environ 4 'themeItems' à la fois, permettant aux utilisateurs de faire défiler vers le haut et vers le bas pour en révéler plus.

Merci

Answer 1

Ressemble plus vous avez besoin d'utiliser quelque chose comme jCarousel

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

Answer 2

cycle de jQuery ne peut montrer un « slide » à un moment, vous pouvez simuler ce que vous essayez de faire si, en mettant plus d'un élément de contenu (par exemple trois ou quatre images) en une seule diapositive. De cette façon, vous obtiendrez 3 ou 4 images à la fois, et lorsque les cycles du conteneur vous obtiendrez votre prochaine diapositive de 3-4 images.

Answer 3

Vous pouvez essayer:

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

où vous pouvez spécifier visbility:

visible: 2

Pour afficher 2 images

Answer 4

cela peut être fait. http://jquery.malsup.com/cycle/div.html

Script de cycle commence par l'élément de navigation (s) tels que:

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

et se poursuit avec la lame 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>` 

la classe 'slide' = divs slpit le contenu défilant ...

la seule chose manquante est le css approprié à defin e la zone de glissement et les liens de navigation

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

cela a fonctionné pour moi comme un charme.