Flickity - проблема с несколькими каруселями - PullRequest
Новая
       58

Flickity - проблема с несколькими каруселями

0 голосов
/ 11 марта 2019

У меня проблема с несколькими объектами 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>

Стиль просто великолепен.На первом Flickity все работает, но на втором нет ячеек, только стрелки и высота = 0 в окне просмотра.

1 Ответ

0 голосов
/ 11 марта 2019

Хорошо, я нашел решение:)

Flickity - опция изменения размера

...