1

I'm having an issue where Flickity seem to behave poorly when there is a limited number of items and using the settings Wrap around and GroupCells Here is a code pen: https://codepen.io/JaieParker/pen/rdPMrB

I would like all the cells to be spaced normally with all the padding on the right if the padding is required. Not sure how to achieve this and thinking it may be a flickity bug.

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;
}
Jaie
  • 89
  • 1
  • 9

1 Answers1

1

I worked out that I need to add 'cellAlign': 'left' in the initial options

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