Arrow Keys | Clicking | Dragging | Swiping | Tilting | Notes

Enablers are pre-existing event handlers that can be easily applied to cards through HTML attributes.

Enablers are activated by adding the fc-enable[enabler] attribute to the fc_container class.

If no enable attributes are used, all enablers will be activated.

  <!-- Create Stack with arrow keys enabled -->
  <div id="unique_id" class="fc_container" fc-enableArrowkeys>
    <!-- The cards in this stack will react to arrow keys -->
  </div>

The arrow keys enabler will cause the stack to react to arrow key click events.

• Up key press - moves down the stack
• Down key press - moves up the stack
• Right key press - flips the current card over to the right
• Left key press - flips the current card over to the left

The clicking enabler will cause cards in stack to flip over in reaction to click events.

The dragging enabler will cause the stack to react to mouse drag events.

• Dragging upwards moves down the stack
• Dragging downwards moves up the stack
• Dragging right flips the current card over to the right
• Dragging left flips the current card over to the left

The swiping enabler will cause the stack to react to touch swipe events.

• Swiping upwards moves down the stack
• Swiping downwards moves up the stack
• Swiping right flips the current card over to the right
• Swiping left flips the current card over to the left

The tilting enabler causes cards in the stack to tilt slightly to indicate the direction it will flip/switch while being swiped or dragged.

• More resource intensive
• Useless if swiping or dragging enablers are not also switched on

• Arrow key animations are unaffected by the fc-enableTilt attribute
• Once one or more enabler attributes are implemented, FlashcardStacks will cancel the default activation all other attributes