javascript - Flickity WrapAround GroupCells，有额外的填充

Question

我遇到了一个问题，当项目数量有限并使用设置 Wrap around 和 GroupCells 时，Flickity 似乎表现不佳这是一个代码笔：https ://codepen.io/JaieParker/pen/rdPMrB

如果需要填充，我希望所有单元格与右侧的所有填充正常间隔。不知道如何实现这一点，并认为它可能是一个 flickity 错误。

function indexChanged(index){
   console.log(index);
}
var flickity = new Flickity('.carousel', { 
  'wrapAround': true,
  'groupCells': true
});

flickity.on('change', indexChanged);

<div class="carousel">
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #EEE;
  max-width: 1600px;
}

.carousel-cell {
  width: 200px;
  height: 200px;
  background: #8C8;
  counter-increment: carousel-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

Answer 1

我发现我需要在初始选项中添加 'cellAlign': 'left'

var flickity = new Flickity('.carousel', { 
 'wrapAround': true,
 'groupCells': true,
 'cellAlign': 'left'
});