Group cells behavior - flickity

Question

I have a flickity carousel, and I want to enable autoPlay. When the carousel is on autoplay, I want to group the cells via groupCells: true. So far so good. When the user clicks on the previous or next buttons, I want the slider to move only 1 cell, so when the user clicks, the groupCells should be false.

My Options:

pageDots: false,
imagesLoaded: true, 
autoPlay: true, 
pauseAutoPlayOnHover: false,
wrapAround: true, 
groupCells: true,
selectedAttraction: 0.01

Create a working example of what you have so far and explain what exactly is the problem. This will help other users better understand the problem and you will probably get more attention to this question and might have an answer. — Dekel, Sep 30 '17 at 20:37
In [this](https://codepen.io/anon/pen/pWrVKQ) example the cells are grouped, autoplay is set on 6s. All good. I want that if I click on one of the nav arrows, it would only swipe left or right only 1 cell, not all three grouped. — balintpekker, Oct 02 '17 at 06:25

Isma · Accepted Answer · 2017-10-05T07:44:03.473

Here is my solution, it's a bit hacky but seems to work, can be tested here: https://codepen.io/anon/pen/QqajpX

<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 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>
<script>
    var carousel = $('.carousel').flickity({
        groupCells: true,
        autoPlay: true
    }).on( 'dragEnd.flickity', function( event, pointer ) {
        exitGroupCells();
    }).on( 'staticClick.flickity', function( event, pointer, cellElement, cellIndex ) {
        restartCarousel(cellIndex);
    });

    var flkty = carousel.data('flickity');

    flkty.prevButton.on( 'tap', function() {
      exitGroupCells(true);
    });

    flkty.nextButton.on( 'tap', function() {
      exitGroupCells();
    });

    function exitGroupCells(prev=false) {            
        if (!flkty.options.autoPlay && !flkty.options.groupCells) {
            return;
        }

        var nextCellIndex = 0;

        if (prev === true) {
            for (var i=0; i <= flkty.selectedIndex; i++) {
                nextCellIndex += flkty.slides[i].cells.length;
            }
            nextCellIndex -= 1;
        } else {
            var nextCell = flkty.slides[flkty.selectedIndex].cells[0];

            for(var i=0; i < flkty.cells.length; i++) {
                if (nextCell === flkty.cells[i]) {
                  nextCellIndex = i;
                  break;
                }
            }
        }

        restartCarousel(nextCellIndex);
    }

    function restartCarousel(nextCellIndex) {
      $('.carousel').flickity('destroy')

        $('.carousel').flickity({
            groupCells: false,
            autoPlay: false,
            initialIndex: nextCellIndex
        });
    }
</script>

It's not bad, but at first the 1-2-3 cells are grouped, and if I click on the navigation to swipe right, it swipes to the 2 cell. I want it to swipe the first cell after the grouped cells, in this case 4. If autoplay is on and already swiped like 2 times, and the grouped cells are 7-8-9, if I swipe right, I want it to swipe to the 10. — balintpekker, Oct 03 '17 at 07:40
@balintpekker I just updated the answer to fix a bug I found when going back in the third group. Should be fine now. — Isma, Oct 05 '17 at 07:39

Group cells behavior - flickity

1 Answers1