Flexible Align

  • Use Hanger and Anchor to provide customizable alignment.
  • The Hanger and Anchor have magnetically bonded effect which allows the panel position to be aligned
  • Hanger: An alignment point within flicking area. It hangs panel anchors to its position.
  • Anchor: Alignment points based on each panels. Panel's anchor position is determined by this value.
    It will be used for a reference point where panel should stop when selected, interacting with hanger position.

Center Align (Default)

hanger: 50%, anchor: 50%

<flicking class="flicking flicking0">
  <div class="panel0"><div class="anchor"></div></div>
  <div class="panel1"><div class="anchor"></div></div>
  <div class="panel2"><div class="anchor"></div></div>
  <div class="panel3"><div class="anchor"></div></div>
  <div class="panel4"><div class="anchor"></div></div>
  <div class="panel0"><div class="anchor"></div></div>
</flicking>

Left Align

hanger: 0, anchor: 0

<flicking class="flicking flicking1" :options="{ hanger: 0, anchor: 0 }">
  <div class="panel0"><div class="anchor"></div></div>
  <div class="panel1"><div class="anchor"></div></div>
  <div class="panel2"><div class="anchor"></div></div>
  <div class="panel3"><div class="anchor"></div></div>
  <div class="panel4"><div class="anchor"></div></div>
  <div class="panel0"><div class="anchor"></div></div>
</flicking>

Custom Align

hanger: 30%, anchor: 50px

<flicking class="flicking flicking2" :options="{ hanger: '30%', anchor: '50px' }">
  <div class="panel0"><div class="anchor"></div></div>
  <div class="panel1"><div class="anchor"></div></div>
  <div class="panel2"><div class="anchor"></div></div>
  <div class="panel3"><div class="anchor"></div></div>
  <div class="panel4"><div class="anchor"></div></div>
  <div class="panel0"><div class="anchor"></div></div>
</flicking>