Slick curseur se trompe largeur

Mes slick curseur se trompe largeur lorsqu'il est initialisé et quand je change la résolution d'écran.

Mon js:

$('.slider').slick({
    infinite: false,
    speed: 300,
    initialSlide: 1,
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: false,
    responsive: [{
        breakpoint: 1024,
        settings: {
            slidesToShow: 2
        }
    }, {
        breakpoint: 650,
        settings: {
            initialSlide: 2,
            slidesToShow: 1
        }
    }]
});

Mon css:

.sub-slider {
width: 100%;
display: flex; 
flex-flow: column;
.slider {
display: flex;   
flex-flow: row;
justify-content: center;
align-content: center;
align-items: center;
min-width:500px;
.sub-box {
text-align: center;
padding-top: 45px;
cursor:pointer;
.title {
color: #6deca0;
font-family: "AmsiProNarw", sans-serif;
font-size: 48px;
font-style: italic;
font-weight: 800;
}
.price {
color: #393939;
font-family: "AmsiProNarw", sans-serif;
font-size: 18px;
font-style: italic;
font-weight: 800;
}
.sub-slider-btn {
margin: 60px 20px;
border-color: #eaeaea!important;
background-color: #fdfdfd!important;
color: #686868!important;
}
}
.sub-box:hover { 
transition: border .2s;            
border-bottom: 14px solid #6deca0;
.sub-slider-btn{
border-color: #6deca0!important;
background-color: rgba(108,235,159,.2)!important;
color: #393939!important;
}
}
}
.sub-slider-confirmation-btn-wrp { 
align-self: center;
display: none;
.sub-slider-confirmation-btn {
cursor:pointer;
$margin: 20px;
$height: 45px;
height: $height;
width: 80px;
border: 1px solid #ccc;
border-radius: 8px;
margin: $margin $margin $margin $margin;
text-align: center;
line-height: $height;  
font-weight: 800;
}
}
}

C'est la façon dont il est chargé, même si j'ai spécifié slidesToShow: 3.

Slick curseur se trompe largeur

Puis lorsque je change de resposive il ressemble à ceci:
Slick curseur se trompe largeur

Je ne suis pas sûr de la façon de résoudre ce problème. J'ai lu à travers eux, avec fix:

Slick curseur mal largeur lors de l'initialisation

Slick carrousel des charges de la mauvaise largeur lors de l'initialisation

https://github.com/kenwheeler/slick/issues/790

https://github.com/kenwheeler/slick/issues/1180

https://github.com/kenwheeler/slick/issues/2167

edit:

J'ai fait du violon https://jsfiddle.net/simeydotme/fmo50w7n/

Il semble fonctionner dans le violon, mais pas sur mon site. Peut-être que j'ai hériter d'un mauvais css? Mais j'ai essayé de débogage pour 5h maintenant. Et je ne peux trouver aucune solution..

  • essayez de changer la largeur de la recharger la page
  • veuillez préciser
  • “Mon css: ...” - slick est livré avec son propre styesheet qui s'applique le style de base nécessaires pour qu'il fonctionne. Maintenant, quand je vois vous écraser les propriétés de base des classes que le curseur utilise, alors je voudrais tout d'abord la question si vous n'avez pas foiré vous-même en ajoutant celles-ci.
  • Il y a quelques tailles définies pour son css de travail. Si vous êtes juste de redimensionnement du navigateur le navigateur bouton agrandir ou de l'outil de redimensionnement, alors il pourrait ne pas fonctionner comme prévu jusqu'à ce que les points définis sont atteints. Je vous suggère d'utiliser l'émulateur de vérifier la réactivité ou l'utilisation en temps réel de l'appareil pour vérifier la même..
InformationsquelleAutor Felix Rosén | 2017-08-17
  1. 10

    J'ai aussi rencontré le même problème - curseur de la largeur de la voie trop grandes plus de 30.000 px de large. Après avoir lu Spencer Rysman réponse, j'ai revu mon balisage et réalisé que j'avais appliqué une row classe à la division emballage de mon curseur et depuis que je suis en utilisant bootstrap 4 par défaut display:flex bien utilisé avec la ligne de classe était à l'origine inattendue de sortie avec la diapositive éléments.

    L'ajout d'un col à l'intérieur de l'habillage ligne div résolu le problème pour moi. 

    <div class="row">
<div class="col-12">
../slider markup
</div>
</div>

    Bien, cela peut ne pas être directement liées à l'op de la question, je pensais que je poste que les autres utilisateurs peuvent rencontrer un problème similaire, comme je l'ai fait et trouver ce fil.

    • Merci beaucoup, votre réponse m'a aidé (problèmes avec la nappe de curseur dans Internet Explorer)!
    • Merci!! Il a résolu mon problème. Je travaille avec angulaire 8 et bootstrap 4.
    • Pour bulma vous pouvez utiliser <div class="column is-12">
    InformationsquelleAutor Eddie Padin
  2. 4

    J'ai eu ce même problème et l'a été également gérer des hérité de la mauvaise css à partir de feuilles de style que je n'est pas l'auteur. Dans mon cas, j'ai trouvé 2 problèmes:

    1. corps avait une déclaration de l'écran: tableau
    2. .page (une page wrapper) avait display: inline-block

    Donc, je voudrais vérifier pour s'assurer que la marée noire curseur n'est pas imbriquée à l'intérieur d'un élément est affiché en tant que table ou inline-block

    • Un élément wrapper avec display: flex pourrait également provoquer le problème.
    • J'ai aussi eu le même problème. Hérité d'un site utilisé display:table et display:table-cell; les Changer à bloc et inline-block a résolu le problème.
    InformationsquelleAutor Spencer Rysman
  3. 0

    J'ai le même problème que sur les écrans de <768px avec bootstrap4, slick (et owlCarousel) largeur de l'appareil plus de 10000px à il y conteneur. Le problème était que le bootstrap conteneur (.conteneur) n'ont pas une largeur de propriété <768px, jeu à 100%, de résoudre le problème.

    InformationsquelleAutor Pavel L.