web-dev-qa-db-fra.com

Le curseur lisse a une mauvaise largeur

Mon curseur slick obtient une largeur incorrecte lors de l'initialisation et lorsque je change la résolution de l'écran.

Mes 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;
        }
    }

}

Voici comment il est chargé, même si j'ai spécifié slidesToShow: 3.

slider error

Ensuite, lorsque je passe au resposif, cela ressemble à ceci: enter image description here

Je ne sais pas comment résoudre ce problème. J'ai lu ces derniers, sans correction:

Slick slider incorrect width on initialization

Le carrousel lisse charge la mauvaise largeur lors de l'initialisation

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

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

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

éditer:

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

Il semble fonctionner au violon, mais pas sur mon site. Peut-être que j'hérite d'un mauvais CSS? Mais j'essaie de déboguer cela depuis 5h maintenant. Et je ne peux pas trouver de solution ..

javascriptjqueryhtmlcssslick.js
6
Felix Rosén

J'ai également rencontré le même problème - la largeur de la piste du curseur est trop grande à 30 000 pixels de large. Après avoir lu la réponse de Spencer Rysman, j'ai passé en revue mon balisage et j'ai réalisé que j'avais appliqué une classe row à la div enveloppant mon curseur et puisque j'utilise bootstrap 4 la valeur par défaut display:flex La propriété utilisée avec la classe de ligne provoquait une sortie inattendue avec les éléments de diapositive.

L'ajout d'un col dans la ligne de séparation a résolu le problème pour moi.

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

Bien que cela ne soit pas directement lié au problème de l'op, j'ai pensé que je publierais car d'autres utilisateurs pourraient rencontrer un problème similaire à moi et trouver ce fil.

14
Eddie Padin

J'ai eu ce même problème et traitais également des mauvais CSS hérités de feuilles de style que je n'ai pas rédigées. Dans mon cas, j'ai trouvé 2 problèmes:

  1. corps avait une déclaration d'affichage: table
  2. .page (un wrapper de page) affichait: inline-block

Je vérifierais donc que le curseur lisse n'est pas imbriqué à l'intérieur d'un élément affiché sous forme de tableau ou de bloc en ligne

4
Spencer Rysman

J'ai le même problème uniquement sur les écrans <768px avec bootstrap4, slick (et owlCarousel) a défini une largeur de plus de 10000px pour le conteneur. Le problème était que le bootstrap conteneur (.container) n'a pas de propriété width <768px, définissez-le à 100% pour résoudre le problème.

1
Pavel L.

Réponse courte:

Assurez-vous que votre curseur lisse est à l'intérieur d'un conteneur avec display: block

Réponse longue:

J'ai eu le même problème après avoir créé une nouvelle classe css .grid.

.grid { display: grid; }

Mon curseur slick est déjà situé à l'intérieur d'un conteneur avec cette classe, mais la classe existait déjà auparavant et mon remplacement a causé le problème, car il était display: block avant.

0
Black

La réponse de Spencer Rysman m'a été très utile. J'avais du mal à intégrer un curseur lisse dans Sharepoint 2013 et j'ai constaté que les composants WebPart (qui deviennent un ensemble de divisions imbriquées) étaient définis comme display: table et display: table-cell. En changeant le style pour afficher: block, mon slick slider fonctionnait correctement.

Pour clarifier, mon problème était similaire: la largeur de la piste du curseur est devenue extrêmement large (> 10 000 pixels) et cela dans les deux dernières versions de production de Chrome et Firefox.

Après des années à me cacher, je voulais remercier spécifiquement Spencer, alors je viens de m'inscrire. C'est pourquoi je ne peux pas encore voter contre la réponse.

Merci, Spencer.

0
Ken Abbott