Flickity -多个转盘的问题

Question

我有一个页面上的多个Flickity对象的问题。我可以很容易地用幻灯片生成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>

​

风格真的很棒。在第一次闪烁时，所有内容都有效，但在第二次闪烁时，没有单元格，只有视口的箭头和height=0。

Answer 1

好了，我已经找到解决方案了:)

Flickity -调整大小选项