Hauteur réactive de carouFredSel

Je suis tombé sur cette question il y a quelque temps; La seule solution que j'ai trouvée est de redimensionner le conteneur lorsque le navigateur est redimensionné. Il fait l'affaire mais le pédant en moi ne l'aime pas beaucoup.

Je n'ai fait qu'une référence au carrousel et onCreate ajouté la fonction onCreate :

 var $carousel = $("#swiper"); $carousel.carouFredSel({ width: "100%", height: "auto", responsive: true, auto: true, scroll: { items: 1, fx: 'scroll' }, duration: 1000, swipe: { onTouch: true, onMouse: true }, items: { visible: { min: 4, max: 4 } }, onCreate: onCreate });​ function onCreate() { $(window).on('resize', onResize).trigger('resize'); } function onResize() { // Get all the possible height values from the slides var heights = $carousel.children().map(function() { return $(this).height(); }); // Find the max height and set it $carousel.parent().add($carousel).height(Math.max.apply(null, heights)); } 

Si vous utilisez toujours ce plugin en 2015, il est temps de passer à autre chose.
La version gratuite n'est plus prise en charge et la version commerciale est maintenant un plugin WordPress. De plus, qui a besoin de pirater un curseur pour le rendre réactif aujourd'hui?

Ce qui a fonctionné pour moi (même dès la version 6.0.3 de mon modèle):

Était la hauteur de réglage: 'variable' dans les deux éléments et les principales options comme:

  $('#foo').carouFredSel({ responsive: true, width: '100%', height: 'variable', items: { height: 'variable' } }); 

Je peux redimensionner à n'importe quel point, et plus il vend le texte dans les DIV, etc.

 $('#foo2').carouFredSel({ responsive: true, auto: true, width: "100%", height: "100%", scroll: 3, prev: '#prev4', next: '#next4', items: { width: '100%', height: '100%' } }).trigger('resize'); 

J'ai eu un problème dans carouFredsel 6.2.0 où l'enveloppe créée a mis à jour sa hauteur OK lorsqu'il est donné hauteur: 'variable' dans la configuration, mais la liste réelle des éléments serait coincé avec la hauteur du premier élément. Ceci a ensuite recoupé les objets suivants qui étaient plus grands que le premier. Le déclencheur updateSizes ne semblait rien faire, alors je l'ai résolu en utilisant l'événement onAfter;

 scroll : { onAfter : function( data ) { var carousel_height = $(this).parents('.caroufredsel_wrapper').css('height'); $(this).css('height', carousel_height); } } 

J'ai eu un certain succès en utilisant simplement des requêtes multimédias CSS pour définir les dimensions de l'élément caroufredsel_wrapper, en utilisant! Important, comme ceci:

 .caroufredsel_wrapper { width: 700px !important; height: 393px !important; } @media screen and (max-width: 768px){ .caroufredsel_wrapper { width: 460px !important; height: 258px !important; } } 

J'étais alors capable de me débarrasser du onCreate de la réponse ci-dessus. Beaucoup plus performant aussi, car la liaison à l'événement window.resize peut déclencher la fonction plusieurs fois lorsque vous faites glisser le cadre de la fenêtre pendant un seul redimensionnement.

J'ai eu ce même problème et j'ai fait ce qui suit:

Enlever les lignes de 3648 à 3652, ces lignes ressemblent à:

 if (is_number(o.items[od[dim]])) { console.log(od[dim]); return o.items[od[dim]]; } 

Et ce code est dans la fonction ms_getLargestSize.

Cela a résolu le problème de hauteur de liste. Pour résoudre la hauteur de l'enveloppe, j'ai changé de vrai à faux le paramètre à la ligne ~ 3609, la ligne ressemble à:

 var sz = cf_mapWrapperSizes(ms_getSizes($v, o, true), o, false); 

Passer à:

 var sz = cf_mapWrapperSizes(ms_getSizes($v, o, false), o, false); 

Après cela, le curseur fonctionne bien lorsqu'il est redimensionné et ne cultive plus les éléments comme divs!

J'espère que cela aidera, Rafael Angeline

Hauteur: "auto" signifie que la hauteur du carrousel sera aussi élevée que l'élément le plus élevé à l'intérieur, y compris les objets non visibles aussi bien! En mode réactif, seule la hauteur des éléments visibles sera modifiée de sorte que la hauteur du carrousel sera toujours la même. (Aucun élément visible ne sera modifié.)

Vous devez utiliser la hauteur: "variable" qui redimensionne automatiquement le carrousel en fonction de la hauteur des éléments visibles uniquement.

Plus à trouver dans les spécifications: http://caroufredsel.dev7studios.com/configuration.php

J'espère que cela t'aides. Regarde Dirch

http://caroufredsel.dev7studios.com/examples/responsive-carousels.php, l'astuce consiste à faire de la largeur et de la hauteur à l'intérieur des objets.

 $("#foo2").carouFredSel({ responsive : true, scroll : { fx : "crossfade" }, items : { visible : 1, width : 870, height : "46%" } }); 

Salutations Lars

En spécifiant une hauteur de 100% pour le plugin ET les éléments ont fonctionné pour moi:

 $('#carousel').carouFredSel({ responsive: true, width: '100%', height: '100%', items: { height: '100%' } }); 

Je pense que Lars avait la bonne idée, si vous spécifiez un% pour la hauteur et que vous avez Réactivé: true, vous ne lui avez PAS donné un pourcentage de l'enveloppe parent, vous déclarerez un% de hauteur à Largeur. Par conséquent, si votre diapositive est de 1000px de largeur à largeur et vous voulez 500px de hauteur à hauteur de réglage de largeur totale: "50%" vous donnera la hauteur de démarrage correcte et votre image sera actualisée en fonction du redimensionnement de la page.

Voir le code à partir du deuxième exemple sur cette page http://docs.dev7studios.com/caroufredsel-old/examples/responsive-carousels.php

Je comprends, le caroufredsel reponsive fonctionne bien, il suffit de faire en sorte que votre css de l'image soit comme celui-ci.

 .caroufredsel_wrapper ul li img{ height: auto; max-width: 100%; width: 100%; } 

La fonctionnalité réactive de Caroufredsel n'aura qu'une hauteur d'image. Pas besoin de jquery / javascript alors c'est ça.

La réponse de Pierre fonctionne presque, sauf qu'elle ne vérifie pas la diapositive la plus élevée, elle vérifie la hauteur de la première glissière. Dans mon diaporama, la 5ème diapositive était plus grande et a fini par être coupée.

Cependant, après le bricolage, j'ai constaté que jouer avec la configuration sur le redimensionnement force la bonne hauteur! Donc, en alternative, voici cette fonction, en activant le débogage.

 var carousel = $("#swiper"); carousel.carouFredSel({ width: "100%", height: "auto", responsive: true, auto: true, scroll: { items: 1, fx: 'scroll' }, duration: 1000, swipe: { onTouch: true, onMouse: true }, items: { visible: { min: 4, max: 4 } }, onCreate: function () { $(window).on('resize', function () { carousel.trigger('configuration', ['debug', false, true]); }).trigger('resize'); } });​ 

Mon scénario est:

1) sur Firefox, les images du carousal carouFredSel seraient sensibles, c'est-à-dire lorsque nous changeons de taille de fenêtre, l'image peut être ajustée à une nouvelle largeur et hauteur sur caroufredsel_wrapper.

2) sur Chrome, les images en carousal ne s'affichent pas. Mais lorsque nous changeons la taille de l'écran, même un peu, les images apparaîtraient de façon immatérielle et seraient réactives.

 var $j = jQuery.noConflict(); /** * Init media gallery. Init carousel. Init zoom. */ function initMediaGallery() { ... $j('#prod-gal').carouFredSel({ direction : "left", responsive : true, width : "100%", height : "null", prev : ".slick-prev", next : ".slick-next", items : { display : "block", float : "left", height : "706", visible : 2, start : 0 }, scroll : { items : { visible: { min: 2, max: 2 } }, easing : "swing", duration : 150, pauseOnHover : true }, auto : { play : false, timeoutDuration : 2000, }, pagination: { container : ".pagination", anchorBuilder : false }, }); } 

** Selon moi, la hauteur de l'image peut être "variable" ou une valeur fixe, comme 706, dans mon cas. C'est juste la taille initiale de l'écran plein, et lorsque nous définissons "sensible: ture", carouFredSel peut calculer la taille de toutes les images automatiquement. Mais pourquoi cela se produit?

Vérifiez le code source, nous pouvons le voir sur Chrome, la hauteur .caroufredsel_wrapper = 0. Une fois que nous avons changé la taille du navigateur un peu, ce serait une hauteur = 706 (par exemple, sur mon boîtier).

J'ai essayé d'utiliser l'événement de redimensionnement (comme suit), pour configurer l'enveloppe une taille initiale et elle ne fonctionne pas, sauf que j'ai défini une valeur fixe, comme 706. Mais si nous définissons une valeur fixe, ce serait toujours cette hauteur.

  onCreate: function () { var self = this; $j(window).on('resize', function () { $j(self).parent().height($j(self).children().first().height()); }).trigger('resize'); } 

Nous pouvons déboguer les js, et voir la hauteur renvoyée est 0 par défaut, même si nous définissons chaque image d'élément une valeur correcte lors de l'initialisation.

 console.log($j(self).children().first().height()); 

Jusqu'à ce moment, on peut supposer, lors de l'initialisation de l'objet carouFredSel, la hauteur n'a pas été créée correctement par carouFreSel js. Enfin, j'essaie de faire ce changement car il semble que carouFredSel ait des «bugs» pour calculer la hauteur de l'image lors de l'initiation sur Chrome (je suppose).

 <script type="text/javascript"> //jQuery(document).ready(function(){ jQuery(window).load(function(){ /* */ initMediaGallery(); }); </script>