Slick carrousel de ne pas redimensionner

Je suis en utilisant Slick.js carrousel sur un site WordPress, je suis en développement. Quand j'ai redimensionner la fenêtre du navigateur, les carrousels ne correspondent pas à elle, ce qui provoque des barres de défilement horizontale. Si je ne lancent pas de Nappe, les images redimensionner en conséquence, comme vous pouvez vous attendre dans un design fluide.

Slick injecte un peu de styles en ligne de façon dynamique, et l'un d'eux est la largeur. Vous pouvez voir la largeur de la face de tous les enfants divs du carrousel:
La nappe de styles en ligne

Nappe du comportement normal est de mettre à jour ces largeurs que vous redimensionnez la fenêtre, mais pour quelque raison il ne se passe pas sur ce site.

Voici le lien vers le site: http://smart.trippple.com.br/

La page d'accueil a deux carrousels, situé au ces positions:

principal #curseur de la maison .le conteneur .curseur-session
principal #seguradoras .conteneur #seguradoras-carrousel .curseur-session

C'est comment je lance le script:

  $('#slider-home .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    arrows: false,
    fade: true,
    slidesToScroll: 1,
    slidesToShow: 1,
    speed: 1000
  });

  $('#seguradoras-carrousel .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    centerMode: true,
    mobileFirst: true,
    pauseOnHover: false,
    slidesToShow: 4
  });

Et voici tout ce que j'ai essayé jusqu'à présent:

Désactivé tous les scripts, sauf pour jQuery et glissantes assurez-vous qu'il n'est pas un conflit;
Testé différentes versions de jQuery;
Essayé d'inclure jQuery Migrate;
Essayé de charger jQuery + noire dans le site de l'en-tête;
Essayé de supprimer les carrousels du récipient;
Essayé de mettre un width et max-width pour le carrousel de la div sur ma feuille de style;
Essayé d'utiliser de la Nappe de la méthode de redimensionnement:
$(window).redimensionner(function() {
$('#slider-maison .curseur-session').slick('resize');
});
Recherche de partout et même l'ouverture d'un problème sur le plugin page Github. L'auteur du plugin a répondu que le script certainement redimensionne et le problème est dans mon environnement, et il est bon. J'ai créé une page HTML statique pour tester, et le carrousel a été de 100% responsive. Il y a quelque chose sur ce site ce qui empêche le script de comportement normal.

Par la manière, vous ne pourrez pas voir Nappe de feuilles de style liées, parce que j'ai incorporé dans le site principal de la feuille de style.

Toute aide est vraiment apprécié! Je suis en train de résoudre ce pendant environ deux semaines, au moins, et je ne sais pas quoi d'autre pour essayer. Toutes les idées sont les bienvenue. Merci!!!!

J'ai eu cette erreur sur votre site, vu sur console. "NetworkError: 404 not Found - smart.trippple.com.br/img/ajax-loader.gif?1462523748 "
Je suis tombé sur cette erreur, mais cela ne semble pas lié. Je l'ai corrigé sur mon serveur local et oublié de le télécharger pour le tester env. Je l'ai fait maintenant, de toute façon. Merci!
J'ai eu un problème similaire et il s'est avéré être causé par l'élément au-dessus de mon carrousel avoir une marge négative-bas (donc le cumul du carrousel) à un certain point d'arrêt. Cela semble interférer avec le calcul lors du redimensionnement de la fenêtre. Une fois que j'ai enlevé la marge négative, il a parfaitement fonctionné.
Je suis également rencontrent le même problème serait bon de savoir si vous avez trouvé une solution.
merci pour le retour pour moi! iirc, pour moi, la question s'est avéré être un wrapper avec display:flex - même si c'était il y a un moment maintenant.

OriginalL'auteur Gabriel Bonifacio | 2016-08-03

avez-vous essayé les nappes sensibles option? je ne sais pas si c'est la réponse que vous cherchez, mais qu'est ce que je fais faire mon curseur de travail basé sur navigateur redimensionner.

$('#seguradoras-carrousel .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    centerMode: true,
    mobileFirst: true,
    pauseOnHover: false,
    slidesToShow: 4,
    //start responsive option
    responsive: [
    {
      breakpoint: 600, //at 600px wide, only 2 slides will show
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480, //at 480px wide, only one slide will show
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    ]
});

Mis à jour pour fonctionner sur les redimensionner au lieu de rafraîchissement

vous avez besoin de deux fonctions, une fonction de redimensionnement et de la nappe de la fonction

jQuery(window).on('resize', function() {

  clearTimeout(resizeTimerInternal)

  resizeTimerInternal = setTimeout(function() {
    //add functions here to fire on resize
    slickSliderWithResize();
  }, 100)

});


function slickSliderWithResize() {
  if (jQuery(window).width() < 1150) {
    if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {

    }
    else {
      jQuery('.slick-slider-wrapper').slick({
        //slick options
      });
    }
  } else {
    if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {
      jQuery('.slick-slider-wrapper').slick("unslick");
    }
  }
}
slickSliderWithResize();

cela doit fonctionner sur redimensionner, mais vous devez le modifier un peu pour s'adapter à votre curseur. le nom du curseur conteneur (j'ai juste nommé slick-slider-wrapper), la nappe d'options, et de la taille de l'avoir briser (je l'ai réglé à moins de 1150px)

dirait aussi que vous avez besoin pour rendre vos contenants adaptés, par exemple à la largeur maximale est de 1199 changer vos contenants largeur soit un pourcentage au lieu de px.
J'ai effectivement essayé, oui. Quand je fais ça, Slick ne change que le nombre de diapositives montré, mais la largeur reste la même (et donc les barres de défilement). Le conteneur est sensible - je utiliser Susy. Si vous accédez à une autre page sans carrousels (par exemple, smart.trippple.com.br/quem-somos), vous verrez tout s'adapte parfaitement. Merci pour votre réponse!
Il n'est pas de travailler sur navigateur redimensionner. Il ne travaille que quand je recharge le navigateur après le redimensionnement.
ive mis à jour ma réponse adaptée à vos besoins

OriginalL'auteur cup_of

1

Peut-être si vous avez la force de la nappe de redimensionner la fenêtre de redimensionnement cela correspondrait :
```
$(window).resize(function() {
  $('#slider-home .slider-session').slick('resize');
  $('#seguradoras-carrousel .slider-session').slick('resize');
});
```
Ouais, @technico, j'ai essayé aussi et j'ai oublié de le mentionner! Il ne fonctionne pas non plus. Je vais mettre à jour ma question. Merci pour votre réponse!
Cela a fonctionné pour moi sur un problème similaire: j'était en train de détruire et de re-création d'une barre de défilement verticale, mais il n'a pas le droit de la hauteur jusqu'à ce que j'ai utilisé $('.slide').slick('resize'), je n'ai pas trouvé dans les documents en ligne.

OriginalL'auteur technico
1

Dans mon cas, j'ai été réellement en manque d'image d'étirement
```
.slick-slide img {width: 100%;}
```
OriginalL'auteur mdob

J'ai récemment eu le même problème et c'est comment je l'ai résolu.
Sur le redimensionner ou le changement d'orientation de la fenêtre de détruire la nappe et de le créer encore une fois.

var slickOptions = {
    arrows: false,
    dots: true,
    adaptiveHeight: true,
    mobileFirst: true
};

$('.slick-element').slick(slickOptions);

$(window).on('resize orientationchange', function() {
    $('.slick-element').slick('unslick');
    $('.slick-element').slick(slickOptions);
});

OriginalL'auteur laviku

Vous devez vous connecter pour publier un commentaire.