Flickity - 多个轮播的问题

Question

我在页面上遇到多个 Flickity obj 的问题。 我可以很容易地用幻灯片生成 Flickity，但是下一个有问题。

这是代码：我正在尝试将 flickity 放在引导程序选项卡面板中（4 个面板，每个面板都有自己的 Flickity）。

 var featuredFlkty = new Flickity('.carousel-featured', { cellAlign: 'left', contain: true, draggable: true, groupCells: 1, pageDots: false, lazyLoad: true }); var topSellerFlkty = new Flickity('.carousel-top-rated', { cellAlign: 'left', contain: true, draggable: true, groupCells: 1, pageDots: false, lazyLoad: true });

 .carousel-section { position: absolute; bottom: 0; left: 0; right: 0; height: 85px; background-color: $carousel-bg-color; border-top: $gallery-border; padding: 7.5px 0; .main-carousel { max-width: 100%; height: 100%; padding: 0 40px; .carousel-cell { width: 66px; height: 100%; @extend %center-flex-display; background-color: $product-slider-bg-color; display: inline-flex; margin: 0 5px; padding: 5px; cursor: pointer; img { max-width: 100%; height: auto; } &.is-selected { opacity: 1; } &:not(.is-selected) { opacity: 0.3; } } }.flickity-button { background: $text-color; padding: 0; }.flickity-button:hover { @extend %bg-hover-animation; }.flickity-prev-next-button { width: 30px; height: 100%; border-radius: 0; } /* icon color */.flickity-button-icon { fill: white; } /* position outside */.flickity-prev-next-button.previous { left: 5px; }.flickity-prev-next-button.next { right: 5px; } }

 <div class="tab-content"> <div role="tabpanel" class="tab-pane" id="top-rated"> <div class="tabpanel-content"> <section class="carousel-section"> <div class="main-carousel carousel-top-rated"> <div class="carousel-cell is-selected" id="carousel-top-rated-cell-1"> <img src="images/rocker-recliner.png" alt="..." /> </div> <div class="carousel-cell" id="carousel-top-rated-cell-2"> <img src="images/black-chair.png" alt="..." /> </div> <div class="carousel-cell" id="carousel-top-rated-cell-3"> <img src="images/Bed.png" alt="..." /> </div> </div> </section> </div> </div> <div role="tabpanel" class="tab-pane" id="featured"> <div class="tabpanel-content"> <section class="carousel-section"> <div class="main-carousel carousel-featured"> <div class="carousel-cell" id="carousel-featured-1"> <img src="images/rocker-recliner.png" alt="..." /> </div> <div class="carousel-cell" id="carousel-featured-2"> <img src="images/black-chair.png" alt="..." /> </div> <div class="carousel-cell" id="carousel-featured-3"> <img src="images/Bed.png" alt="..." /> </div> </div> </section> </div> </div> </div>

造型很棒。 一切都在第一次 Flickity 上运行，但在第二次，没有单元格，只有视口的箭头和高度 = 0。

Answer 1

好的，我找到了解决方法:)

轻拂-调整大小选项

Answer 2

对于那些仍在寻找此问题的详细解决方案的人来说，这是我正在使用的代码，它在同一页面的多个画廊中运行良好：

const galleries = document.querySelectorAll('.block-gallery');

galleries.forEach(gallery=> {
    new Flickity(gallery, {
        contain: true,
        setGallerySize: true,
        wrapAround: true,
        imagesLoaded: true
    });
});