CrossFlicking​

CrossFlicking supports flicking that can move in both horizontal and vertical directions.

You can easily create UIs with panels with multiple categories, like the example below.

Spring

Summer

Autumn

Winter

Spring Wallpaper 1

Cherry blossoms, Bird, Flowers

12345

An example of using CrossFlicking is shown in the demo above.

How to use​

<div id="flicking" class="flicking-viewport">
  <div class="flicking-camera">
    <div>
      <div class="flicking-panel">
        Panel 1-A
      </div>
      <div class="flicking-panel">
        Panel 1-B
      </div>
    </div>
    <div>
      <div class="flicking-panel">
        Panel 2-A
      </div>
      <div class="flicking-panel">
        Panel 2-B
      </div>
    </div>
    <div>
      <div class="flicking-panel">
        Panel 3-A
      </div>
      <div class="flicking-panel">
        Panel 3-B
      </div>
    </div>
  </div>
</div>

<script>
  const flicking = new Flicking.CrossFlicking("#flicking");
</script>

Using the Methods​

You can use methods that exist in Flicking.

Due to CrossFlicking using a different panel structure, methods that manipulate panels such as append, prepend, insert, and remove are not available in CrossFlicking.

Listening to Events​

You can listen to events from the Flicking inside each Panel.
Each event has a mainIndex: number property, which is the index of the Panel including Flicking.

• sideHoldStart extends holdStart
• sideHoldEnd extends holdEnd
• sideMoveStart extends moveStart
• sideMove extends move
• sideMoveEnd extends moveEnd
• sideWillChange extends willChange
• sideChanged extends changed
• sideWillRestore extends willRestore
• sideRestored extends restored

Also sideIndex: number property has been added to the events that notify index changes.
You can get the side index of the Flicking when the following events are fired.

• changed event
• willChange event

<div id="flicking" class="flicking-viewport">
  ...
</div>

<script>
  const flicking = new Flicking.CrossFlicking("#flicking");

  flicking.on("changed", (e) => {
    console.log(`Main Flicking index changed to ${e.index}`);
  });

  flicking.on("sideChanged", (e) => {
    console.log(`Side Flicking ${e.mainIndex} index changed to ${e.index}`);
  });
</script>

Options​

class CrossFlicking extends Flicking