web-dev-qa-db-fra.com

hauteur sensible carouFredSel

j'ai des problèmes de hauteur de mon carrousel réactif avec carouFredSel.

puisque les images sont réactives et que le carrousel est également configuré pour répondre.

Il ajoute toujours la hauteur maximale de l'image à la div.

Lorsque mes images ont une largeur de 740 et une hauteur de 960. Il redimensionne l'image à la largeur de réponse pour l'adapter à l'écran. L'image est également redimensionnée pour s'adapter à la largeur, mais la div semble toujours penser à une image avec une hauteur de 960.

Comment résoudre ce problème?

javascriptresponsive-designcaroufredsel
16
nytrm

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

J'ai seulement fait référence au carrousel et 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, alors il est temps de passer à autre chose.
La version gratuite n’est plus supportée et la version commerciale est maintenant un plugin Wordpress. De plus, qui a besoin de pirater un curseur pour le rendre réactif de nos jours?!

32
Pierre

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 options principales comme:

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

Je peux redimensionner à tout moment et ne plus couper le texte dans les DIV, etc.

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

J'ai eu un problème dans carouFredsel 6.2.0 où l'encapsuleur créé a mis à jour sa hauteur. OK lorsque la hauteur est donnée: 'variable' dans la configuration, mais la liste des éléments réels serait collée à la hauteur du premier élément. Cela a ensuite découpé tous les éléments ultérieurs plus grands que le premier. Le déclencheur updateSizes ne semblant rien faire, je l'ai donc résolu à l'aide de l'événement onAfter;

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

http://caroufredsel.dev7studios.com/examples/responsive-carousels.php l’astuce consiste à définir la largeur et la hauteur à l’intérieur des éléments.

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

Salutations Lars

0
Lars Jendrzejewski

Je me rends compte, le caroufredsel reponsive fonctionne très bien, vous avez juste besoin de faire votre css de l'image pour être comme ça.

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

La fonctionnalité réactive de caroufredsel vous permettra juste d'obtenir une hauteur d'image. Pas besoin de jquery/javascript, alors c'est tout.

0
tnchuntic

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

Suppression des lignes de 3648 à 3652, ces lignes sont les suivantes:

if (is_number(o.items[o.d[dim]]))
{
    console.log(o.d[dim]);
    return o.items[o.d[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'encapsuleur, j'ai modifié de true en false le paramètre de la ligne ~ 3609, comme suit:

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

Changer en:

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

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

J'espère que ça aide, Rafael Angeline

0
Rafael Angeline

height: "auto" signifie que la hauteur du carrousel sera aussi haute que l'élément le plus élevé à l'intérieur, y compris les éléments non visibles! 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 height: "variable" à la place, ce 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. Cordialement Dirch

0
Dirch

J'ai eu quelques succès en utilisant simplement des requêtes de média 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;
    }
}

Je pouvais alors me débarrasser de la réponse onCreate de la réponse ci-dessus. Beaucoup plus performant également, 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 au cours d'un redimensionnement unique.

0
Dan

Spécifier une hauteur de 100% pour le plugin ET les éléments qui ont fonctionné pour moi:

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

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

Cependant, après avoir bricolé, j'ai constaté que jouer avec la configuration lors du redimensionnement force la bonne hauteur! Donc, au lieu de cela, voici cette fonction, activer 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');
  }
});​
0
Will Lanni

Je pense que Lars avait la bonne idée. Si vous spécifiez un% pour height et que vous avez Responsive: true activé, vous ne lui donnez PAS un pourcentage du wrapper parent, vous déclarez un% ratio hauteur/largeur. Par conséquent, si votre curseur mesure 1 000 pixels de largeur sur toute la largeur et que vous voulez 500 pixels de hauteur, le paramètre height: "50%" vous donnera la hauteur de départ correcte et votre image sera actualisée en fonction du redimensionnement de la page.

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

0
Nickfmc