carouFredSel hauteur réactive

Je suis tombé sur ce problème il y a un moment, la seule solution que j'ai trouvé est de redimensionner le conteneur lorsque le navigateur est redimensionnée. Il fait le tour, mais le pédant en moi ne l'aime pas beaucoup.

Je n'en ai fait une référence sur le carrousel, et a ajouté l' onCreate fonction:

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 êtes toujours à l'aide de ce plugin en 2015, alors il est temps de passer.

La version gratuite est plus pris en charge et la version commerciale est maintenant un plugin WordPress. Plus qui a besoin de pirater un curseur afin de répondre aujourd'hui ?!

$('#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 certain succès en utilisant simplement les CSS media queries pour définir les dimensions de la caroufredsel_wrapper élément, à l'aide !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 en mesure de se débarrasser de la onCreate des trucs à partir de la réponse ci-dessus. Beaucoup plus performant aussi, que la liaison à la fenêtre.redimensionner événement peut déclencher la fonction de nombreuses fois lorsque vous faites glisser le cadre de la fenêtre au cours d'une seule redimensionner.

hauteur: "auto" signifie que la hauteur du carrousel sera la taille par la plus haute de l'élément à l'intérieur, y compris non les éléments visibles! En responsive mode, seule la hauteur de l'élément visible sera modifié de telle sorte que la hauteur du carrousel sera toujours le même. (Aucun éléments visibles ne seront pas modifiées.)

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

Plus à trouver dans les specs: http://caroufredsel.dev7studios.com/configuration.php

Espère que cette aide. Ce Qui Concerne Dirch

La spécification d'un 100% de la hauteur pour le plugin ET les éléments fonctionné pour moi:

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

Je l'ai trouver, le caroufredsel reponsive fonctionne très bien il vous suffit de faire votre css de l'image comme cela.

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

La caroufredsel sensible de la fonctionnalité sera tout simplement obtenir de vous la hauteur de l'image Pas besoin de jquery/javascript puis c'est tout.

Mon scénario est:

1) sur Firefox, les images dans les carouFredSel carousal serait sensible, c'est lors du changement de la taille de la fenêtre, l'image peut être ajustée à la nouvelle largeur et la hauteur sur caroufredsel_wrapper.

2) sur Chrome, les images dans les carousal ne montrent pas. Mais lors du changement de la taille de l'écran, même un peu, les images sortent de la immatériellement et d'être sensible.

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
    },

});

}

** Sur ma compréhension, la hauteur de l'image peut être "variable" ou une valeur fixe, comme 706, dans mon cas. c'est juste la première taille de l'écran, et lorsque nous avons mis en "responsive: ture", carouFredSel devrait peut calculer la taille de toutes les images automatiquement. Mais pourquoi est-ce arrivé??

Vérifier le code source, on peut voir sur google Chrome, le .caroufredsel_wrapper hauteur=0. Une fois que nous modifions la taille du navigateur un peu, il serait hauteur=706 (par exemple, dans mon cas).

J'ai essayé d'utiliser l'événement de redimensionnement (comme les suivants), pour créer un wrapper une taille initiale et il ne fonctionne pas sauf que je fixe la valeur, comme 706. Mais si nous avons fixé une valeur fixe, il 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 permet de déboguer le js, et de voir le retour de la hauteur est de 0 comme valeur par défaut, nous avons tout de même réglez chaque élément de l'image d'un correctif de valeur lorsque les initialiser.

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

Jusqu'à ce moment, nous pouvons nous supposons que lors de l'initialisation de la carouFredSel objet, la hauteur n'a pas peuvent être créés correctement par carouFreSel js. Enfin, j'ai essayer de faire ce changement, car il ressemble à carouFredSel a des "bugs" quand 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>