getAdjacentCellElements

[desandro]

Originally posted by @wgstjf in #54 (now deleted, and moved here)

---

I am struggling with one thing though. I have a slider that effectively has 3 is-selected slides at a time, the rest are (through css) set to 0.5 opacity. I can target the is-selected slide wrapper to apply opacity of 1 but can't figure out how to effectively target the preceding and following slide to also make them full opaque. Any help would be greatly appreciated.

Did try the following to apply my own class of 'is-active' but firstly, doesn't seem to target the neighbouring slides correctly and secondly not sure how to make this seamless... :-)

$gallery.on( 'cellSelect', function() {
    var selectedSlide = flkty.selectedIndex;
    var previousSlide = selectedSlide-1;
    var nextSlide = selectedSlide+1;
    $('.applications-slider').removeClass('is-active');
    $( ".slide-wrapper" ).eq( previousSlide ).addClass('is-active');
    $( ".slide-wrapper" ).eq(selectedSlide).addClass('is-active');
  });

Cheers,

Will

---

[desandro]

Yes, this can be done with a bit of extra code. See demo http://codepen.io/desandro/pen/rarmjG

You'll need to add this bit of code

Flickity.prototype.getAdjacentCellElements = function( adjacentCount, index ) {
  adjacentCount = adjacentCount || 1;
  index = index === undefined ? this.selectedIndex : index;
  var startIndex = index - adjacentCount;
  var cellElems = []; 
  var len = this.cells.length;
  for ( var i = index - adjacentCount; i <= index + adjacentCount; i++ ) {
    var cellIndex = this.options.wrapAround ? fizzyUIUtils.modulo( i, len ) : i;
    var cell = this.cells[ cellIndex ];
    if ( cell ) {
      cellElems.push( cell.element );
    }
  }
  return cellElems;
};

This adds the getAdjacentCellElements method. This method returns an array of elements.

You can then use it like so:

$gallery.on( 'cellSelect', function() {
  $gallery.find('.gallery-cell.is-active').removeClass('is-active');
  var adjCellElems = $gallery.flickity('getAdjacentCellElements');
  $( adjCellElems ).addClass('is-active');
});

getAdjacentCellElements has two arguments

// jQuery
$gallery.flickity( 'getAdjacentCellElements', adjacentCount, index )
// vanilla JS
flkty.getAdjacentCellElements( adjacentCount, index )

• adjacentCount - how many adjacent cells in either direction should be returned. Default is 1. For 1, it will return the 1 cell before, the 1 cell after, and the selected cell.
• index - index of the cell to get adjacent cells. Default is selectedIndex

getAdjacentCellElements will return wrapped cells, so if wrapAround: true and the index is the last cell, it will return cells 4, 5, and 1.

---

+1 or subscribe to this issue if you would like to see getAdjacentCellElements get added proper to Flickity

[wgstjf]

@desandro thanks for the truly amazing support. With your help I now have the slider working perfectly. I only wish I had found out about your slider sooner rather than the hours of struggling I have had trying to get slick to do what I wanted :-)

Cheers,

Will

[Julix91]

4 year old post, so fair enough - but the code pen isn't working anymore.

[desandro]

@Julix91 Pen updated. getAdjacentCellElements has been an official method since Flickity v2.

flkty.getAdjacentCellElements( count, index )

• count: the number of adjacent cells
• index: the index of the cell
• returns: an Array of cell elements

[Julix91]

Oh neat! I'm still becoming familiar with Flickity. There's a lot more to it than meets the eye! Thanks for your continued support & work on this project, @desandro ! - and congrats and best wishes on your new job.