metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.52k stars 605 forks source link

Flickity sync and nav hover event #814

Closed Moorst closed 6 years ago

Moorst commented 6 years ago

Hi,

I'm looking to change the main carousel on the hover event of a nav item, using flickity-sync.

https://github.com/metafizzy/flickity-sync/issues/8#issuecomment-314789316 essentially covers the functionality I'm after, though of course I'd need a hover event instead of staticClick. Is this available, or is it possible to add a custom hover event?

e.g.

$navCarousel.on( 'hover.flickity', function( event, pointer, cellElement, cellIndex ) {
  if ( cellElement ) {
    $mainCarousel.flickity( 'select', cellIndex );
  }
});
desandro commented 6 years ago

Flickity does not have a hover event, but you could build this functionality with jQuery's mouseover event.

See demo https://codepen.io/desandro/pen/LJYxmZ

var $carouselMain = $('.carousel-main').flickity();

var $carouselNav = $('.carousel-nav').flickity({
  asNavFor: '.carousel-main',
  contain: true,
  pageDots: false,
});

// select main on nav hover
$carouselNav.on( 'mouseover', '.carousel-cell', function( event ) {
  var index = $( event.currentTarget ).index();
  $carouselMain.flickity( 'select', index );
});