jCarouselLite - hauteur?

Question

J'utilise le plugin jCarouselLite jquery pour effectuer une rotation simple où une image + texte est affichée à la fois, avec un bouton prev + next. Mon problème est que jCousousLite semble insérer une hauteur définie pour tous les éléments. Mon besoin est que toutes mes images sont de la même taille, mais la quantité de texte peut différer - actuellement les coupes de/cachent le texte où les lignes sont nombreuses. Je veux être capable de montrer tous les types de textes, peu importe le nombre de lignes - des idées?

Answer 1

Essayez de définir le conteneur externe (.jCousousLite) sur "overflow-x: visible;". Si votre carrousel est vertical, remplacez-le par débordement.

Answer 2

Dans le fichier Javascript jCarouselLite changer le mot « caché » pour visible », qui me .. pour trier

Answer 3

Je sais que c'est un ancien poste, mais voilà comment je réglé le problème. C'est applicable à la version 1.0.1 du code carousellite.js.

Le problème est que la hauteur du conteneur est définie par le premier élément, plutôt que de parcourir tous les éléments pour trouver le plus grand. J'ai ajusté le code en conséquence comme suit.

D'abord, ajouter une nouvelle fonction au script appelé MAX_HEIGHT:

function max_height(el) { 
    // Adapted 25/09/2011 - Tony Bolton - Return height of the largest item.. 
    var _height = 0; 

    $.each(el,function() { 
     var _compHeight = $(this).height(); 

     if (_compHeight > _height) { 
      _height = _compHeight; 
     } 
    }); 

    return parseInt(_height); 
}; 

Maintenant, cherchez la ligne de code où la hauteur de l'élément de liste est définie:

li.css({ width: li.width(), height: li.height() }); 

changement à la suivant:

li.css({ width: li.width(), height: max_height(li) }); 

Cela devrait régler le problème de recadrage. Incidemment, cela ne fonctionnera que si vous initialisez le carrousel dans l'événement window.load, sinon le dom ne saura pas quelle est la hauteur du conteneur.

Answer 4

Ajouter ces cinq lignes ci-dessous fonction var _compHeight = $(this).height(); dans le MAX_HEIGHT de Tony() de sorte que les marges sont également considérés:

var marginTopStr = $(this).css('marginTop'); 
var marginTop = parseInt(marginTopStr.substr(0, marginTopStr.length - 2)); 
var marginBottomStr = $(this).css('marginBottom'); 
var marginBottom = parseInt(marginBottomStr.substr(0, marginBottomStr.length - 2)); 
_compHeight += (marginTop + marginBottom); 

Answer 5

Je voudrais préciser une excellente réponse de Tony légèrement. Non seulement la ligne li.css devrait être modifiée pour utiliser sa nouvelle fonction, mais cette ligne devrait également être déplacée dans le code. Voici le code d'origine:

var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation 
var ulSize = liSize * itemLength;     // size of full ul(total length, not just for the visible items) 
var divSize = liSize * v;       // size of entire div(total length for just the visible items) 

li.css({width: li.width(), height: li.height()}); 
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize)); 

Ceci est le code modifié:

li.css({width: li.width(),height: max_height(li)}); 

var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation 
var ulSize = liSize * itemLength;     // size of full ul(total length, not just for the visible items) 
var divSize = liSize * v;       // size of entire div(total length for just the visible items) 

ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize)); 

Cela garantit que l'animation accueille la nouvelle hauteur de l'élément de liste.