4

I have a requirement to create a dragable free-scrolling carousel, which I can do with the likes of http://flickity.metafizzy.co/ or http://idangero.us/swiper/. However neither of these allow me to specify an initial movement. Is it possible to simulate a click-drag on these carousels to 'give them a spin'?

Something like: 

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

Update 1 I've created a fiddle with Flickety to demonstrate. How do I give this an initial movement? https://jsfiddle.net/sprintstar/b34w9uec/

Update 2 I want it to move initially like you've grabbed it and given it a gentle spin. But I don't want it to auto advance, like with 'autoPlay'. Unfortunately Flickerty offers no such configuration.

Sprintstar
  • 7,938
  • 5
  • 38
  • 51
  • 1
    Did you try your "Something like" code? See http://api.jquery.com/trigger/ – JNF Mar 03 '16 at 11:05
  • Yes you can do something like this ``$('#my-button').trigger('click');`` – ismnoiet Mar 03 '16 at 11:12
  • Possible duplicate of [Triggering a JavaScript click() event at specific coordinates](http://stackoverflow.com/questions/2845178/triggering-a-javascript-click-event-at-specific-coordinates) – Rayon Mar 03 '16 at 11:15
  • I did @JNF but it had no effect because I guess I'm sending the wrong events with/or the wrong event data. – Sprintstar Mar 08 '16 at 09:32
  • 1
    I tried using the jquery-simulate-ext plugin with the drag-n-drop extension with no success... I know what you're trying to do, you want it to spin smoothly like it does when you drag it with the options you have. Too bad the plugin doesn't give access to init `velocity` and `accel`. Good luck, and +1 for the question. – Bitwise Creative Mar 08 '16 at 10:51

2 Answers2

4

You do not have to use events to launch your carousel using flickity,

You can simply:

  1. Retrieve your Flickity instance
  2. Specify a velocity for your carousel
  3. Specify that you are in freeScrolling mode (and not scrolling toward a specific position)
  4. Launch 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/

Pandawan
  • 2,027
  • 1
  • 18
  • 24
  • Ah, that works for me. Velocity, isFreeScrolling and startAnimation are all undocumented, and I'd actually made a hacked version which set these internally, but I'd rather use an un-hacked version. – Sprintstar Mar 09 '16 at 13:07
1

If I understood correctly you want to have an initial movement on load.

I have tried setting autoPlay to a specific value on plugin initialization like this:

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

Check this Fiddle

kapantzak
  • 11,610
  • 4
  • 39
  • 61