metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 603 forks source link

Strange behaviour cellAlign. Sometime works correctly, other times no. #1309

Open gipic opened 2 months ago

gipic commented 2 months ago

img1 img2 img3

Hi, I am new to this library and I think this is awesome. I don't know if I miss something but I found a strange behaviour using cellAlign: left (default). Sometimes the cell is not completely aligned on left like in img1 and img2. If I open the Inspector, then it works correctly, even if I close it. But if I refresh the page, it returns to render incorrectly. I tried on different PC, browsers, even on my friend's PC. Is this normal?

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

    <style>
        * {
            box-sizing: border-box;
        }

        .main-carousel {
            border: 1px solid red;
        }

        .carousel-cell {
            border: 1px solid green;
            height: 250px;
            width: 250px;
        }
    </style>
</head>

<body>
    <div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
        <div class="carousel-cell" style="border:1px solid green">Elemento 1</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 2</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 3</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 4</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 5</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 6</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 7</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 8</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 9</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 10</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 11</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 12</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 13</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 14</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 15</div>
    </div>

    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

    <script>

    </script>
</body>

</html>