Comment faire un carrousel circulaire avec jCousel et contenu statique?

Sur le site du plug-in jCousousel, vous trouverez un exemple de réalisation d'un carrousel circulaire, mais il utilise un contenu généré dynamiquement. Je voudrais savoir comment on peut faire exactement la même chose avec du contenu statique.Comment faire un carrousel circulaire avec jCousel et contenu statique?

Voici l'exemple circulaire jCarousel en utilisant un contenu dynamique:
http://sorgalla.com/projects/jcarousel/examples/special_circular.html

De plus, comme je le fais pour un site qui sera mise à jour régulièrement, comment puis-je empêcher les boutons précédent et suivant de montrer quand il n'y a que 3 éléments de liste à afficher?

Source

2009-09-07 Anonymous

Cet exemple n'utilise pas de contenu dynamique, il utilise du contenu statique. La liste des images est en cours de chargement:

var mycarousel_itemList = [ 
    {url: 'http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg', title: 'Flower1'}, 
    {url: 'http://static.flickr.com/75/199481072_b4a0d09597_s.jpg', title: 'Flower2'}, 
    {url: 'http://static.flickr.com/57/199481087_33ae73a8de_s.jpg', title: 'Flower3'}, 
    {url: 'http://static.flickr.com/77/199481108_4359e6b971_s.jpg', title: 'Flower4'}, 
    {url: 'http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg', title: 'Flower5'}, 
    {url: 'http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg', title: 'Flower6'}, 
    {url: 'http://static.flickr.com/58/199481218_264ce20da0_s.jpg', title: 'Flower7'}, 
    {url: 'http://static.flickr.com/69/199481255_fdfe885f87_s.jpg', title: 'Flower8'}, 
    {url: 'http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg', title: 'Flower9'}, 
    {url: 'http://static.flickr.com/70/229228324_08223b70fa_s.jpg', title: 'Flower10'} 
];

Qu'est-ce qui ne fonctionne pas sur le code de cette page pour vous?

Si vous êtes confus par le commentaire:

<!-- The content will be dynamically loaded in here -->

Tout ce qui signifie que le carrousel est démarré à la page charge par ce code:

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ 
     wrap: 'circular', 
     itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback}, 
     itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback} 
    }); 
});

Source

2009-09-07 15:05:37

Je suppose que ce que je ne comprends pas, c'est comment je peux obtenir un carrousel circulaire lorsque mon contenu n'est pas chargé dynamiquement. Le site que je mets à jour est codé plus comme l'exemple du carrousel simple: http://sorgalla.com/projects/jcarousel/examples/static_simple.html C'est une liste non ordonnée et chaque élément de la liste a un en-tête, un paragraphe descriptif et une image ou deux. Le carrousel simple fonctionne bien, mais pour la vie de moi, je ne peux pas comprendre comment faire un carrousel circulaire. –

Pouvez-vous ne pas modifier le site afin que le contenu est chargé comme l'exemple sur la page que vous avez liée? –

hmm ... J'essayais d'éviter de trop changer le balisage et le javascript. Alors, dites-vous qu'un carrousel circulaire n'est possible que si je charge dynamiquement le contenu comme l'a fait cet exemple? –

il suffit d'ajouter une pellicule: last, en la fonction init pour la faire boucler.

Source

2010-08-05 14:47:00

@ Jean-Michael wrap: 'last' n'est pas correct. Ensuite, ce n'est plus un carrousel circulaire, car il fait rapidement «défiler vers l'arrière» pour revenir au premier élément plutôt que de montrer le prochain (premier) élément en douceur. – Arcadian

Comment faire un carrousel circulaire avec jCousel et contenu statique?

Répondre

Questions connexes