Question

我遇到的问题是，当物品数量有限且使用环绕设置和GroupCells时，Flickity似乎表现不佳这是一个代码笔：https://codepen.io/JaieParker/pen/rdPMrB

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

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

我发现我需要添加＆＃39; cellAlign＆＃39;：＆＃39; left＆＃39;在初始选项中

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

Flickity WrapAround GroupCells，有额外的填充

1 个答案: