Adding .is-next and .is-previous classes to slides

[YuraKolesnikov]

Trying this in my local Vue.js project and it didn't work. I'm not really sure where to add this code so I just added it at the end of the file. Pls help!

return Flickity;

}));

Flickity.createMethods.push('_createPrevNextCells');

Flickity.prototype._createPrevNextCells = function() {
  this.on( 'select', this.setPrevNextCells );
};

Flickity.prototype.setPrevNextCells = function() {
  // remove classes
  changeSlideClasses( this.previousSlide, 'remove', 'is-previous' );
  changeSlideClasses( this.nextSlide, 'remove', 'is-next' );
  // set slides
  this.previousSlide = this.slides[ this.selectedIndex - 1 ];
  this.nextSlide = this.slides[ this.selectedIndex + 1 ];
  // add classes
  changeSlideClasses( this.previousSlide, 'add', 'is-previous' );
  changeSlideClasses( this.nextSlide, 'add', 'is-next' );
};

function changeSlideClasses( slide, method, className ) {
  if ( !slide ) {
    return;
  }
  slide.getCellElements().forEach( function( cellElem ) {
    cellElem.classList[ method ]( className );
  });
}

https://codepen.io/desandro/pen/MagWrN

[desandro]

You'll need to add this code before you initialize Flickity.

[ghost]

A looping variant could be done like this:

Flickity.createMethods.push('_createPrevNextCells')
Flickity.prototype._createPrevNextCells = function() {
  this.on( 'select', this.setPrevNextCells )
}
Flickity.prototype.setPrevNextCells = function() {
  // remove classes
  changeSlideClasses( this.previousSlide, 'remove', 'is-previous' )
  changeSlideClasses( this.nextSlide, 'remove', 'is-next' )
  // set slides
  if (this.selectedIndex - 1 < 0) {
    this.previousSlide = this.slides[ this.slides.length - 1 ]
  }
  else {
    this.previousSlide = this.slides[ this.selectedIndex - 1 ]
  }
  if (this.selectedIndex + 1 === this.slides.length) {
    this.nextSlide = this.slides[0]
  }
  else {
    this.nextSlide = this.slides[this.selectedIndex + 1]
  }
  // add classes
  changeSlideClasses( this.previousSlide, 'add', 'is-previous' )
  changeSlideClasses( this.nextSlide, 'add', 'is-next' )
}
function changeSlideClasses( slide, method, className ) {
  if (!slide) {
    return
  }
  slide.getCellElements().forEach( function( cellElem ) {
    cellElem.classList[ method ]( className )
  })
}

[ghost]

And with Vue I did like this:

<script>
  let Flickity;
  if (process.browser) {
    Flickity = require('flickity');
    Flickity.createMethods.push('_createPrevNextCells')
    Flickity.prototype._createPrevNextCells = function() {
      this.on( 'select', this.setPrevNextCells )
    }
    Flickity.prototype.setPrevNextCells = function() {
      // remove classes
      changeSlideClasses( this.previousSlide, 'remove', 'is-previous' )
      changeSlideClasses( this.nextSlide, 'remove', 'is-next' )
      // set slides
      if (this.selectedIndex - 1 < 0) {
        this.previousSlide = this.slides[ this.slides.length - 1 ]
      }
      else {
        this.previousSlide = this.slides[ this.selectedIndex - 1 ]
      }
      if (this.selectedIndex + 1 === this.slides.length) {
        this.nextSlide = this.slides[0]
      }
      else {
        this.nextSlide = this.slides[this.selectedIndex + 1]
      }
      // add classes
      changeSlideClasses( this.previousSlide, 'add', 'is-previous' )
      changeSlideClasses( this.nextSlide, 'add', 'is-next' )
    }
    function changeSlideClasses( slide, method, className ) {
      if (!slide) {
        return
      }
      slide.getCellElements().forEach( function( cellElem ) {
        cellElem.classList[ method ]( className )
      })
    }
  }
  export default {
    name: 'Slide',
    data() {
      return {
        flickity: null,
        options: {
          prevNextButtons: false,
          pageDots: false,
          wrapAround: true,
          initialIndex: 1,
          cellAlign: 'center',
          dragThreshold: 10,
          selectedAttraction: 0.1,
          friction: 0.4
        }
      }
    },
    mounted: function() {
      this.init();
    },
    beforeDestroy() {
      if (this.flickity) {
        this.flickity.destroy()
        this.flickity = null
      }
    },
    methods: {
      init () {
        this.flickity = new Flickity(this.$refs.slide, this.options);
      }
    }
  }
</script>

<template>
  <div
    ref="slide"
    class="Slide">
    <slot/>
  </div>
</template>

[jagoncalves14]

Hi @desandro, this issue was closed, but I really think that this should be a default feature on Flickity.

[umairqazi523]

I did like this to get the is-previous-previous and is-next-next to get the effect of the stacked cards especially for wrapAround: true

`

Flickity.createMethods.push('_createPrevNextCells')

Flickity.prototype._createPrevNextCells = function () {
    this.on('select', this.setPrevNextCells)
}

Flickity.prototype.setPrevNextCells = function () {

    changeSlideClasses(this.previousSlide, 'remove', 'is-previous')
    changeSlideClasses(this.previousPrevSlide, 'remove', 'is-previous-previous')
    changeSlideClasses(this.nextSlide, 'remove', 'is-next')
    changeSlideClasses(this.nextNextSlide, 'remove', 'is-next-next')
    
    if (this.selectedIndex - 1 < 0) {
        this.previousSlide = this.slides[this.slides.length - 1]
        this.previousPrevSlide = this.slides[this.slides.length - 2]
    } else {
        this.previousSlide = this.slides[this.selectedIndex - 1]
        this.previousPrevSlide = this.slides[this.selectedIndex - 2]
    }

    if (this.selectedIndex === 1) {
        this.previousPrevSlide = this.slides[this.slides.length - 1]
    } else {}

    if (this.selectedIndex + 1 === this.slides.length) {
        this.nextSlide = this.slides[0]
        this.nextNextSlide = this.slides[1]
    } else {
        this.nextSlide = this.slides[this.selectedIndex + 1]
        this.nextNextSlide = this.slides[this.selectedIndex + 2]
    }

    if (this.selectedIndex + 2 === this.slides.length) {
        this.nextNextSlide = this.slides[0]
    } else {}

    changeSlideClasses(this.previousSlide, 'add', 'is-previous')
    changeSlideClasses(this.previousPrevSlide, 'add', 'is-previous-previous')
    changeSlideClasses(this.nextSlide, 'add', 'is-next')
    changeSlideClasses(this.nextNextSlide, 'add', 'is-next-next')
}
function changeSlideClasses(slide, method, className) {
    if (!slide) {
        return
    }
    slide.getCellElements().forEach(function (cellElem) {
        cellElem.classList[method](className)
    })
}

`