Geek Answers Handbook

Can I trigger click / drag events programmatically to start the carousel

I have a requirement to create a drag-and-drop scrollable carousel that I can do with such http://flickity.metafizzy.co/ or http://idangero.us/swiper/ . However, none of them allows me to indicate the initial movement. Is it possible to simulate a mouse click on these carousels to “give them a spin”?

Sort of:

$('.home-map-wrapper').trigger('mousedown').trigger('mousemove', { clientX: 0, clientY: 0 }).trigger('mousemove', { clientX: 10, clientY: 0 });

Update 1 I created a flickety fiddle to demonstrate. How can I give this initial movement? https://jsfiddle.net/sprintstar/b34w9uec/

Update 2 I want it to move initially, as if you grabbed it and gently pushed it away. But I do not want it to automatically advance, for example, using "autoPlay". Unfortunately, Flickerty does not offer such a configuration.

+4
source share
2 answers

You don’t need to use events to start your carousel using flicker,

You can simply:

  • Get Flickity Instance
  • Indicate the speed for your carousel
  • Indicate that you are in freeScrolling mode (and do not scroll to a specific position).
  • Start animation

Code

function initFlickety() {
    var flickityElement = $('.home-map-wrapper').flickity({
      freeScroll: true,
      wrapAround: true,
      prevNextButtons: false,
      pageDots: false,
      freeScrollFriction: 0.00
    });
    var flickity = flickityElement.data("flickity"); // [1]
    flickity.velocity = -1; // [2]
    flickity.isFreeScrolling = true; // [3]
    flickity.startAnimation(); // [4]
}

Fiddle

https://jsfiddle.net/b34w9uec/6/

+4
source

, .

autoPlay :

$('.home-map-wrapper').flickity({
  autoPlay: 1000,
  freeScroll: true,
  wrapAround: true,
  prevNextButtons: false,
  pageDots: false,
  freeScrollFriction: 0.00
});

Fiddle

+1

More articles:


All Articles