jQuery Carrousel circulaire "ca-content-item" largeur

Question

J'ai donc trouvé cet utile jQuery Content Carousel (http://tympanus.net/Development/CircularContentCarousel/), que je recherchais depuis longtemps.

J'ai modifié les codes pour montrer de trois boîtes à cinq boîte: http://helpmyedu.com/test/

Cependant, lorsque je clique sur « plus », je ne sais pas où de modifier la largeur de la div - ca-content-wrapper , pour faire toute la largeur quand "plus" est cliqué!

Merci pour l'aide!

Mis à jour ------------------------------------- Jusqu'à présent, j'ai réussi à faire afficher les éléments étendus affichent correctement, et la fermeture des trois premiers éléments correctement ...

Cependant, quand je ferme l'étendue, les deux dernières sur le côté droit ne montre pas les éléments d'origine (S'il vous plaît se référer au lien pour ce dont je parle).

également lorsque la fenêtre est ouverte étendue, il y a des espaces quand je essaie de naviguer à gauche ou à droite ....

S'il vous plaît aider

Answer 1

En jquery.contentcarousel.js, utilisez développeur de chrome ou Firebug , Après CTRL + F pour trouver ca-content-wrapper.

Lorsque vous trouvez, vous avez

openItem : function($wrapper, $item, opts, cache) { 
       cache.idxClicked = $item.index(); 
       // the item's position (1, 2, or 3) on the viewport (the visible items) 
       cache.winpos  = aux.getWinPos($item.position().left, cache); 
       $wrapper.find('div.ca-item').not($item).hide(); 
       $item.find('div.ca-content-wrapper').css('left', cache.itemW + 'px').stop().animate({ 
        width : cache.itemW * 2 + 'px', 
        left : cache.itemW + 'px' 
       }, opts.itemSpeed, opts.itemEasing) 
       .end() 
       .stop() 
       .animate({ 
        left : '0px' 
       }, opts.itemSpeed, opts.itemEasing, function() { 
        cache.isAnimating = false; 
        cache.expanded  = true; 

        aux.openItems($wrapper, $item, opts, cache); 
       }); 

      }, 

Vous pouvez voir:

width : cache.itemW * 2 + 'px', 

Essayez de modifier cette valeur sur ce fichier js.

Answer 2

aussi, vous avez à changer ce code:

switch(val) { 
case 0   : return 1; break; 
case cache.itemW  : return 2; break; 
case cache.itemW * 2 : return 3; break; 


} 

et ajoutez une ligne pour chaque élément que vous souhaitez afficher dans l'emballage de contenu, dans ce cas, je veux afficher 4 éléments que vous allez comme ceci:

switch(val) { 
case 0   : return 1; break; 
case cache.itemW  : return 2; break; 
case cache.itemW * 2 : return 3; break; 
case cache.itemW * 3 : return 4; break; 

}