initialIndex and groupCells

[runnickrun]

I'm trying to set initialIndex on a carousel where I use groupCells but apparently nothing happens.
Any workaround to achieve the functionality?

Test case: https://codepen.io/runnick/pen/GXgbXr

[AdamJaggard]

Because the cells are grouped initial index is now counting groups not cells, so there is no index 7 any more because there are only 4 groups. If you want the 7th cell then you can set initial index to 2 (to get the 3rd group). You could figure it our programatically if you know how many cells are in each group. No idea if this is intended behaviour or not.

[runnickrun]

@AdamJaggard thanks, in my requirement though it should show as first slide (not just on the screen).
So I was wondering maybe it's possible not to use groupCells but still retain the ability to move carousel by 3, 4, n slides per change.

[desandro]

@runnickrun If you want to select a group slide by cell index or cell selector string, you can do so with selectCell method

[runnickrun]

@desandro Yeah, I tried that, but that still select group, so e.g. if item is 3rd in the group, it will be 3rd on the screen. What I'm trying to achieve is to show the selected item as first.

Example of this could be seen here:
https://www.dailymotion.com/video/x6s3cjm?playlist=x5z978

upon clicking on the previous arrow, remaining slides are shown

Hopefully that makes sense. I assume it means to kind of “split” the group and understand that it might not be possible by default, but would be great if you could provide some kind of direction.

[desandro]

it means to kind of “split” the group and understand that it might not be possible by default

Yeah, that is how groupCells is designed to work. If you need to align individual cells, then you cannot use groupCells. There is no API to workaround this behavior.

[desandro]

In v2.2.0, you can now set initialIndex to a selector string. This will select the corresponding slide that contains the cell with the selector. I'm closing this issue as fixed.

initialIndex: '.is-initial-select'

<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell is-initial-select">...</div>

If you run into a problem with this feature, please open a new issue. Thank you for your input 🌈🐻