Question

我在页面上有多个Flickity obj时遇到问题。我可以轻松地用幻灯片生成Flickity，但是下一张幻灯片有问题。

这是代码：我正在尝试在引导式Tabpanel（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上起作用，但是在第二个上，没有单元格，只有箭头和视口的height = 0。

Answer 1

好，我找到了解决方案：）

灵活性-调整大小选项

轻拂-多个轮播问题

1 个答案: