1

我在页面上有多个 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。

4

1 回答 1

0

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

Flickity - 调整大小选项

于 2019-03-11T15:21:09.297 回答