plugin jQuery Cycle - Hauteur automatique pour les conteneurs

Question

J'utilise le cycle plugin sur certains divs, comme ceci:

<div class="sections"> 
    <div class="Section"> <img /> text </div> 
    <div class="Section"> <img /> text </div> 
    <div class="Section"> <img /> text </div> 
</div> 

tous les divs .Section ont une hauteur variable, en fonction de leur contenu. Comment faire un cycle pour ne pas redimensionner le div (sections) du conteneur à la plus grande hauteur de l'enfant? Au lieu de cela, je veux que le conteneur soit redimensionné sur chaque animation à la hauteur actuelle de l'enfant.

Answer 1

Définissez l'option containerResize sur 0 et essayez. Plus de détails sur l'option here.

Answer 2

ok, j'ai réussi à le faire en accrochant une fonction sur 'après' événement:

function onAfter(curr, next, opts, fwd) { 
    var $ht = $(this).height(); 

    //set the container's height to that of the current slide 
    $(this).parent().animate({height: $ht}); 
} 

trouvé l'info ici: http://forum.jquery.com/topic/jquery-cycle-auto-height

Answer 3

Je l'ai fait un peu différent:

$('.cycle-list').cycle({ 
    containerResize: 0, 
    before: function(currSlideElement, nextSlideElement, options, forwardFlag) { 
     var container = $(this).parent(); 
     container.css('height', Math.max(container.height(), $(nextSlideElement).height())); 
    }, 
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) { 
     $(this).parent().css('height', $(this).height()); 
    } 
    }); 

Mes articles avaient également une hauteur différente. Dans l'avant, il s'assure que le conteneur est assez grand pour le plus grand des 2 toboggans. Dans l'après, il suffit de redimensionner à la diapositive suivante. De cette façon, il ne déborde jamais parce que votre conteneur est trop petit.

note: ceci est pour le cycle 1