Demos

Panel add / remove

PrependAppend

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="flicking-panel">1</div>
    <div class="flicking-panel">2</div>
    <div class="flicking-panel">3</div>
    <div class="flicking-panel">4</div>
    <div class="flicking-panel">5</div>
  </div>
</div>
<div class="block is-flex is-justify-content-center">
  <span id="btn-prepend" class="button mr-2 is-info is-outlined">Prepend</span>
  <span id="btn-append" class="button mr-2 is-info is-outlined">Append</span>
</div>

js
const flicking = new Flicking("#flick", {
  renderOnlyVisible: true
});
let minIdx = 1;
let maxIdx = 5;

const prependBtn = document.querySelector("#btn-prepend");
const appendBtn = document.querySelector("#btn-append");

prependBtn.addEventListener("click", () => {
  flicking.prepend(`<div class="flicking-panel">${--minIdx}</div>`)
});
appendBtn.addEventListener("click", () => {
  flicking.append(`<div class="flicking-panel">${++maxIdx}</div>`)
});

export default () => {
  const [panels, setPanels] = useState([0, 1, 2, 3, 4]);

  return <>
    <Flicking renderOnlyVisible={true}>
      {panels.map(index => <div className="flicking-panel" key={index}>{index + 1}</div>)}
    </Flicking>
    <div className="block is-flex is-justify-content-center">
      <span className="button mr-2 is-info is-outlined" onClick={() => setPanels([panels[0] - 1, ...panels])}>Prepend</span>
      <span className="button mr-2 is-info is-outlined" onClick={() => setPanels([...panels, panels[panels.length - 1] + 1])}>Append</span>
    </div>
  </>
};

<template>
  <div class="wrapper">
    <Flicking :options="{ renderOnlyVisible: true }">
      <div v-for="idx in list" class="flicking-panel" :key="idx">{{ idx }}</div>
    </Flicking>
    <div class="block is-flex is-justify-content-center">
      <span class="button mr-2 is-info is-outlined" @click="() => {
        list.splice(0, 0, ...[list[0] - 2, list[0] - 1]);
      }">Prepend</span>
      <span class="button mr-2 is-info is-outlined" @click="() => {
        list.push(list[list.length - 1] + 1, list[list.length - 1] + 2);
      }">Append</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [0, 1, 2, 3, 4]
    }
  }
}
</script>

<template>
  <div class="wrapper">
    <Flicking :options="{ renderOnlyVisible: true }">
      <div v-for="idx in list" class="flicking-panel" :key="idx">{{ idx }}</div>
    </Flicking>
    <div class="block is-flex is-justify-content-center">
      <span class="button mr-2 is-info is-outlined" @click="() => {
        list.splice(0, 0, ...[list[0] - 2, list[0] - 1]);
      }">Prepend</span>
      <span class="button mr-2 is-info is-outlined" @click="() => {
        list.push(list[list.length - 1] + 1, list[list.length - 1] + 2);
      }">Append</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [0, 1, 2, 3, 4]
    }
  }
}
</script>

app.component.html
<ngx-flicking [options]="{ renderOnlyVisible: true }">
  <div flicking-panel *ngFor="let idx of list" class="flicking-panel">{{ idx }}</div>
</ngx-flicking>
<div class="block is-flex is-justify-content-center">
  <span class="button mr-2 is-info is-outlined" (click)="onPrepend()">Prepend</span>
  <span class="button mr-2 is-info is-outlined" (click)="onAppend()">Append</span>
</div>

app.component.ts
@Component({})
export class DemoFlickingComponent {
  list = [0, 1, 2, 3, 4];

  onPrepend() {
    this.list = [this.list[0] - 1, ...this.list];
  }

  onAppend() {
    this.list = [...this.list, this.list[this.list.length - 1] + 1];
  }
}

export default () => {
  const [panels, setPanels] = useState([0, 1, 2, 3, 4]);

  return <>
    <Flicking renderOnlyVisible={true}>
      {panels.map(index => <div className="flicking-panel" key={index}>{index + 1}</div>)}
    </Flicking>
    <div className="block is-flex is-justify-content-center">
      <span className="button mr-2 is-info is-outlined" onClick={() => setPanels([panels[0] - 1, ...panels])}>Prepend</span>
      <span className="button mr-2 is-info is-outlined" onClick={() => setPanels([...panels, panels[panels.length - 1] + 1])}>Append</span>
    </div>
  </>
};

<script>
  import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
  import "@egjs/svelte-flicking/dist/flicking.css";

  let list = [0, 1, 2, 3, 4];

  function prepend() {
    list = [list[0] - 1, ...list];
  }

  function append() {
    list = [...list, list[list.length - 1] + 1];
  }
</script>

<Flicking bind:this={flicking}>
  {#each list as idx (idx)}
    <FlickingPanel class="flicking-panel">{ idx }</FlickingPanel>
  {/each}
</Flicking>
<div class="block is-flex is-justify-content-center">
  <span class="button mr-2 is-info is-outlined" on:click={prepend}>Prepend</span>
  <span class="button mr-2 is-info is-outlined" on:click={append}>Append</span>
</div>

Nested Flickings

2.1

2.2

2.3

3.1

3.2

3.3

html
<div id="flick1" class="flicking-viewport">
  <div className="flicking-panel">1</div>
  <div className="flicking-panel nested-wide">
    <div id="flick2" class="flicking-viewport">
      <div className="flicking-panel">2.1</div>
      <div className="flicking-panel">2.2</div>
      <div className="flicking-panel">2.3</div>
    </div>
  </div>
  <div className="flicking-panel nested-wide vertical">
    <div id="flick3" class="flicking-viewport vertical">
      <div className="flicking-panel">3.1</div>
      <div className="flicking-panel">3.2</div>
      <div className="flicking-panel">3.3</div>
    </div>
  </div>
  <div className="flicking-panel">4</div>
</div>

js
const flicking1 = new Flicking("#flick1");
const flicking2 = new Flicking("#flick2", {
  bounce: 0,
  bound: true,
  nested: true
});
const flicking3 = new Flicking("#flick3", {
  bounce: 0,
  bound: true,
  horizontal: false
});

DemoComponent.jsx
export default () => {
    return <>
      <Flicking>
        <div className="flicking-panel">1</div>
        <div className="flicking-panel nested-wide">
          <Flicking bounce="0" bound={true} nested={true}>
            <div className="flicking-panel">2.1</div>
            <div className="flicking-panel">2.2</div>
            <div className="flicking-panel">2.3</div>
          </Flicking>
        </div>
        <div className="flicking-panel nested-wide vertical">
          <Flicking bounce="0" bound={true} horizontal={false}>
            <div className="flicking-panel">3.1</div>
            <div className="flicking-panel">3.2</div>
            <div className="flicking-panel">3.3</div>
          </Flicking>
        </div>
        <div className="flicking-panel">4</div>
      </Flicking>
    </>
  };

template
<flicking>
  <div class="flicking-panel">1</div>
  <div class="flicking-panel nested-wide">
    <flicking :options="{ bounce: 0, bound: true, nested: true }">
      <div class="flicking-panel">2.1</div>
      <div class="flicking-panel">2.2</div>
      <div class="flicking-panel">2.3</div>
    </flicking>
  </div>
  <div class="flicking-panel nested-wide vertical">
    <flicking :options="{ bounce: 0, bound: true, horizontal: false }">
      <div class="flicking-panel">3.1</div>
      <div class="flicking-panel">3.2</div>
      <div class="flicking-panel">3.3</div>
    </flicking>
  </div>
  <div class="flicking-panel">4</div>
</flicking>

script
import Flicking from "@egjs/vue-flicking";

export default {
    components: {
        Flicking
    }
};

template
<flicking>
  <div class="flicking-panel">1</div>
  <div class="flicking-panel nested-wide">
    <flicking :options="{ bounce: 0, bound: true, nested: true }">
      <div class="flicking-panel">2.1</div>
      <div class="flicking-panel">2.2</div>
      <div class="flicking-panel">2.3</div>
    </flicking>
  </div>
  <div class="flicking-panel nested-wide vertical">
    <flicking :options="{ bounce: 0, bound: true, horizontal: false }">
      <div class="flicking-panel">3.1</div>
      <div class="flicking-panel">3.2</div>
      <div class="flicking-panel">3.3</div>
    </flicking>
  </div>
  <div class="flicking-panel">4</div>
</flicking>

script
import Flicking from "@egjs/vue3-flicking";

export default {
    components: {
        Flicking
    }
};

app.component.html
<ngx-flicking>
  <div flicking-panel>1</div>
  <div flicking-panel class="nested-wide">
    <ngx-flicking [options]="{ bounce: 0, bound: true, nested: true }">
      <div flicking-panel>2.1</div>
      <div flicking-panel>2.2</div>
      <div flicking-panel>2.3</div>
    </ngx-flicking>
  </div>
  <div flicking-panel class="nested-wide vertical">
    <ngx-flicking [options]="{ bounce: 0, bound: true, horizontal: false }">
      <div flicking-panel>3.1</div>
      <div flicking-panel>3.2</div>
      <div flicking-panel>3.3</div>
    </ngx-flicking>
  </div>
  <div flicking-panel>4</div>
</div>

app.component.ts
import { Component } from "@angular/core";
import Flicking from "@egjs/ngx-flicking";

@Component({
  templateUrl: './demo.component.html'
})
export class DemoComponent {}

DemoComponent.jsx
export default () => {
    return <>
      <Flicking>
        <div className="flicking-panel">1</div>
        <div className="flicking-panel nested-wide">
          <Flicking bounce="0" bound={true} nested={true}>
            <div className="flicking-panel">2.1</div>
            <div className="flicking-panel">2.2</div>
            <div className="flicking-panel">2.3</div>
          </Flicking>
        </div>
        <div className="flicking-panel nested-wide vertical">
          <Flicking bounce="0" bound={true} horizontal={false}>
            <div className="flicking-panel">3.1</div>
            <div className="flicking-panel">3.2</div>
            <div className="flicking-panel">3.3</div>
          </Flicking>
        </div>
        <div className="flicking-panel">4</div>
      </Flicking>
    </>
  };

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
</script>

<Flicking>
  <FlickingPanel>1</FlickingPanel>
  <FlickingPanel class="nested-wide">
    <Flicking options={{ bounce: 0, bound: true, nested: true }}>
      <FlickingPanel>2.1</FlickingPanel>
      <FlickingPanel>2.2</FlickingPanel>
      <FlickingPanel>2.3</FlickingPanel>
    </Flicking>
  </FlickingPanel>
  <FlickingPanel class="nested-wide vertical">
    <Flicking options={{ bounce: 0, bound: true, horizontal: false }}>
      <FlickingPanel>3.1</FlickingPanel>
      <FlickingPanel>3.2</FlickingPanel>
      <FlickingPanel>3.3</FlickingPanel>
    </Flicking>
  </FlickingPanel>
  <FlickingPanel>4</FlickingPanel>
</Flicking>

Variable Size Panels

Flicking uses panel element's real size, and doesn't modify them.

info

Check out the circular option, which provides a continuous loop depending on the Panel's size

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div style="width: 120px;">1</div>
    <div style="width: 20%;">2</div>
    <div style="width: 500px;">3</div>
    <div style="width: 300px;">4</div>
    <div style="width: 100%;">5</div>
  </div>
</div>

js
import Flicking from "@egjs/flicking";

const flicking = new Flicking("#flick", {
  circular: true
});

DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";

export default class DemoComponent extends Component {
  public render() {
    return <Flicking circular={true}>
      <div style={{ width: "120px" }}>1</div>
      <div style={{ width: "20%" }}>2</div>
      <div style={{ width: "500px" }}>3</div>
      <div style={{ width: "300px" }}>4</div>
      <div style={{ width: "100%" }}>5</div>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true }">
  <div style="width: 120px;">1</div>
  <div style="width: 20%;">2</div>
  <div style="width: 500px;">3</div>
  <div style="width: 300px;">4</div>
  <div style="width: 100%;">5</div>
</Flicking>

script
import Flicking from "@egjs/vue-flicking";

export default {
  components: {
    Flicking
  }
}

template
<Flicking :options="{ circular: true }">
  <div style="width: 120px;">1</div>
  <div style="width: 20%;">2</div>
  <div style="width: 500px;">3</div>
  <div style="width: 300px;">4</div>
  <div style="width: 100%;">5</div>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";

export default {
  components: {
    Flicking
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }">
  <div flicking-panel style="width: 120px;">1</div>
  <div flicking-panel style="width: 20%;">2</div>
  <div flicking-panel style="width: 500px;">3</div>
  <div flicking-panel style="width: 300px;">4</div>
  <div flicking-panel style="width: 100%;">5</div>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking from "@egjs/ngx-flicking";

@Component({
  templateUrl: './demo.component.html'
})
export class DemoComponent {}

DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";

export default class DemoComponent extends Component {
  public render() {
    return <Flicking circular={true}>
      <div style={{ width: "120px" }}>1</div>
      <div style={{ width: "20%" }}>2</div>
      <div style={{ width: "500px" }}>3</div>
      <div style={{ width: "300px" }}>4</div>
      <div style={{ width: "100%" }}>5</div>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
</script>

<Flicking options={{ circular: true }}>
  <FlickingPanel style="width: 120px;">1</FlickingPanel>
  <FlickingPanel style="width: 20%;">2</FlickingPanel>
  <FlickingPanel style="width: 500px;">3</FlickingPanel>
  <FlickingPanel style="width: 300px;">4</FlickingPanel>
  <FlickingPanel style="width: 100%;">5</FlickingPanel>
</Flicking>

Horizontal Scroller

You can easily create iScroll-like horizontal scroller with Flicking

🍎 Apple🍉 Watermelon🥝 Kiwi🍌 Banana🍊 Orange🍋 Lemon🍈 Melon🍑 Peach🍍 Pineapple🍓 Strawberry🍒 Cherry🍔 Hamburger🍕 Pizza🍞 Bread🍜 Ramen🍦 Ice cream🍮 Pudding🍩 Donut🍪 Cookie🍚 Rice🧀 Cheese🌭 Hot dog🥓 Bacon🥪 Sandwich🥛 Milk☕ Coffee🍵 Green tea🍺 Beer🧃 Juice🍷 Wine🥃 Whisky🍸 Cocktail🍶 Sake

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <span class="button mr-2 is-white">🍎 Apple</span>
    <span class="button mr-2 is-white">🍉 Watermelon</span>
    <span class="button mr-2 is-white">🥝 Kiwi</span>
    <span class="button mr-2 is-white">...</span>
  </div>
</div>

js
import Flicking from "@egjs/flicking";

const flicking = new Flicking("#flick", {
  moveType: "freeScroll",
  bound: true
});

DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";

export default class DemoComponent extends Component {
  public render() {
    return <Flicking moveType="freeScroll" bound={true}>
      <span className="button mr-2 is-white">🍎 Apple</span>
      <span className="button mr-2 is-white">🍉 Watermelon</span>
      <span className="button mr-2 is-white">🥝 Kiwi</span>
      <span className="button mr-2 is-white">...</span>
    </Flicking>;
  }
}

template
<Flicking :options="{ moveType: 'freeScroll', bound: true }">
  <span class="button mr-2 is-white">🍎 Apple</span>
  <span class="button mr-2 is-white">🍉 Watermelon</span>
  <span class="button mr-2 is-white">🥝 Kiwi</span>
  <span class="button mr-2 is-white">...</span>
</Flicking>

script
import Flicking from "@egjs/vue-flicking";

export default {
  components: {
    Flicking
  }
}

template
<Flicking :options="{ moveType: 'freeScroll', bound: true }">
  <span class="button mr-2 is-white">🍎 Apple</span>
  <span class="button mr-2 is-white">🍉 Watermelon</span>
  <span class="button mr-2 is-white">🥝 Kiwi</span>
  <span class="button mr-2 is-white">...</span>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";

export default {
  components: {
    Flicking
  }
}

demo.component.html
<ngx-flicking [options]="{ moveType: 'freeScroll', bound: true }">
  <span flicking-panel class="button mr-2 is-white">🍎 Apple</span>
  <span flicking-panel class="button mr-2 is-white">🍉 Watermelon</span>
  <span flicking-panel class="button mr-2 is-white">🥝 Kiwi</span>
  <span flicking-panel class="button mr-2 is-white">...</span>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking from "@egjs/ngx-flicking";

@Component({
  templateUrl: './demo.component.html'
})
export class DemoComponent {}

DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";

export default class DemoComponent extends Component {
  public render() {
    return <Flicking moveType="freeScroll" bound={true}>
      <span className="button mr-2 is-white">🍎 Apple</span>
      <span className="button mr-2 is-white">🍉 Watermelon</span>
      <span className="button mr-2 is-white">🥝 Kiwi</span>
      <span className="button mr-2 is-white">...</span>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
</script>

<Flicking options={{ moveType: 'freeScroll', bound: true }}>
  <FlickingPanel class="button mr-2 is-white">🍎 Apple</FlickingPanel>
  <FlickingPanel class="button mr-2 is-white">🍉 Watermelon</FlickingPanel>
  <FlickingPanel class="button mr-2 is-white">🥝 Kiwi</FlickingPanel>
  <FlickingPanel class="button mr-2 is-white">...</FlickingPanel>
</Flicking>

Grid

Made with @egjs/grid

html
<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div className="grid-panel has-background-primary has-text-white">1</div>
    <div id="grid1" className="grid-panel">
      <div class="has-background-warning has-text-dark">2</div>
      <div class="has-background-danger has-text-white">3</div>
      <div class="has-background-info has-text-white">4</div>
      <div class="has-background-success has-text-white">5</div>
      <div class="has-background-grey has-text-white">6</div>
    </div>
    <div className="grid-panel has-background-grey-darker has-text-white">7</div>
    <div id="grid2" className="grid-panel">
      <div class="has-background-light has-text-dark ">8</div>
      <div class="has-background-grey has-text-white">9</div>
      <div class="has-background-info has-text-white">10</div>
      <div class="has-background-success has-text-white">11</div>
      <div class="has-background-warning has-text-dark">12</div>
      <div class="has-background-danger has-text-white">13</div>
    </div>
  </div>
</div>

js
import { FrameGrid } from "@egjs/grid";

const flicking = new Flicking("#flick", {
  circular: true
});
const grid1 = new FrameGrid("#grid1", {
  gap: 10,
  frame: [[1, 1, 2, 2], [3, 3, 2, 2], [4, 4, 4, 5]]
});
const grid2 = new FrameGrid("#grid2", {
  gap: 10,
  frame: [[1, 1, 1, 1], [2, 2, 3, 3], [4, 5, 5, 6]]
});

<Flicking circular={true}>
  <div className="grid-panel">1</div>
  <FrameGrid className="grid-panel">
    <div className="has-background-warning has-text-dark">2</div>
    <div className="has-background-danger has-text-white">3</div>
    <div className="has-background-info has-text-white">4</div>
    <div className="has-background-success has-text-white">5</div>
    <div className="has-background-grey has-text-white">6</div>
  </FrameGrid>
  <div className="grid-panel">7</div>
  <FrameGrid className="grid-panel">
    <div className="has-background-light has-text-dark ">8</div>
    <div className="has-background-grey has-text-white">9</div>
    <div className="has-background-info has-text-white">10</div>
    <div className="has-background-success has-text-white">11</div>
    <div className="has-background-warning has-text-dark">12</div>
    <div className="has-background-danger has-text-white">13</div>
  </FrameGrid>
</Flicking>

template
<Flicking :options="{ circular: true }">
  <div class="grid-panel">1</div>
  <FrameGrid class="grid-panel">
    <div class="has-background-warning has-text-dark">2</div>
    <div class="has-background-danger has-text-white">3</div>
    <div class="has-background-info has-text-white">4</div>
    <div class="has-background-success has-text-white">5</div>
    <div class="has-background-grey has-text-white">6</div>
  </FrameGrid>
  <div class="grid-panel">7</div>
  <FrameGrid class="grid-panel">
    <div class="has-background-light has-text-dark ">8</div>
    <div class="has-background-grey has-text-white">9</div>
    <div class="has-background-info has-text-white">10</div>
    <div class="has-background-success has-text-white">11</div>
    <div class="has-background-warning has-text-dark">12</div>
    <div class="has-background-danger has-text-white">13</div>
  </FrameGrid>
</Flicking>

script
import Flicking from "@egjs/vue-flicking";

export default {
  components: {
    Flicking
  }
}

template
<Flicking :options="{ circular: true }">
  <div class="grid-panel">1</div>
  <FrameGrid class="grid-panel">
    <div class="has-background-warning has-text-dark">2</div>
    <div class="has-background-danger has-text-white">3</div>
    <div class="has-background-info has-text-white">4</div>
    <div class="has-background-success has-text-white">5</div>
    <div class="has-background-grey has-text-white">6</div>
  </FrameGrid>
  <div class="grid-panel">7</div>
  <FrameGrid class="grid-panel">
    <div class="has-background-light has-text-dark ">8</div>
    <div class="has-background-grey has-text-white">9</div>
    <div class="has-background-info has-text-white">10</div>
    <div class="has-background-success has-text-white">11</div>
    <div class="has-background-warning has-text-dark">12</div>
    <div class="has-background-danger has-text-white">13</div>
  </FrameGrid>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";

export default {
  components: {
    Flicking
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true }">
  <div flicking-panel class="grid-panel">1</div>
  <FrameGrid flicking-panel class="grid-panel">
    <div class="has-background-warning has-text-dark">2</div>
    <div class="has-background-danger has-text-white">3</div>
    <div class="has-background-info has-text-white">4</div>
    <div class="has-background-success has-text-white">5</div>
    <div class="has-background-grey has-text-white">6</div>
  </FrameGrid>
  <div flicking-panel class="grid-panel">7</div>
  <FrameGrid flicking-panel class="grid-panel">
    <div class="has-background-light has-text-dark ">8</div>
    <div class="has-background-grey has-text-white">9</div>
    <div class="has-background-info has-text-white">10</div>
    <div class="has-background-success has-text-white">11</div>
    <div class="has-background-warning has-text-dark">12</div>
    <div class="has-background-danger has-text-white">13</div>
  </FrameGrid>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking from "@egjs/ngx-flicking";

@Component({
  templateUrl: './demo.component.html'
})
export class DemoComponent {}

<Flicking circular={true}>
  <div className="grid-panel">1</div>
  <FrameGrid className="grid-panel">
    <div className="has-background-warning has-text-dark">2</div>
    <div className="has-background-danger has-text-white">3</div>
    <div className="has-background-info has-text-white">4</div>
    <div className="has-background-success has-text-white">5</div>
    <div className="has-background-grey has-text-white">6</div>
  </FrameGrid>
  <div className="grid-panel">7</div>
  <FrameGrid className="grid-panel">
    <div className="has-background-light has-text-dark ">8</div>
    <div className="has-background-grey has-text-white">9</div>
    <div className="has-background-info has-text-white">10</div>
    <div className="has-background-success has-text-white">11</div>
    <div className="has-background-warning has-text-dark">12</div>
    <div className="has-background-danger has-text-white">13</div>
  </FrameGrid>
</Flicking>

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
</script>

<Flicking options={{ circular: true }}>
  <FlickingPanel class="grid-panel">1</FlickingPanel>
  <FlickingPanel class="grid-panel">
    <div class="has-background-warning has-text-dark">2</div>
    <div class="has-background-danger has-text-white">3</div>
    <div class="has-background-info has-text-white">4</div>
    <div class="has-background-success has-text-white">5</div>
    <div class="has-background-grey has-text-white">6</div>
  </FlickingPanel>
  <FlickingPanel class="grid-panel">7</FlickingPanel>
  <FlickingPanel class="grid-panel">
    <div class="has-background-light has-text-dark ">8</div>
    <div class="has-background-grey has-text-white">9</div>
    <div class="has-background-info has-text-white">10</div>
    <div class="has-background-success has-text-white">11</div>
    <div class="has-background-warning has-text-dark">12</div>
    <div class="has-background-danger has-text-white">13</div>
  </FlickingPanel>
</Flicking>

Vertical Display

21/05/17 Sunny14.0°/17.0°

21/05/18 Cloudy13.0°/23.0°

21/05/19 Rainy11.0°/19.0°

html
<div id="flick" class="flicking-viewport vertical">
  <div class="flicking-camera">
    <div class="weather-panel">...</div>
    <div class="weather-panel">...</div>
    <div class="weather-panel">...</div>
  </div>
</div>

js
import Flicking from "@egjs/flicking";
import { AutoPlay } from "@egjs/flicking-plugins";

const flicking = new Flicking("#flick", {
  circular: true,
  horizontal: false
});

flicking.addPlugins(new AutoPlay());

DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { AutoPlay } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new AutoPlay()];

  public render() {
    return <Flicking circular={true} horizontal={false} plugins={this._plugins}>
      <div className="weather-panel">...</div>
      <div className="weather-panel">...</div>
      <div className="weather-panel">...</div>
    </Flicking>;
  }
}

template
<Flicking :options="{ circular: true, horizontal: false }" :plugins="plugins">
  <div class="weather-panel">...</div>
  <div class="weather-panel">...</div>
  <div class="weather-panel">...</div>
</Flicking>

script
import Flicking from "@egjs/vue-flicking";
import { AutoPlay } from "@egjs/flicking-plugins";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new AutoPlay()]
    }
  }
}

template
<Flicking :options="{ circular: true, horizontal: false }" :plugins="plugins">
  <div class="weather-panel">...</div>
  <div class="weather-panel">...</div>
  <div class="weather-panel">...</div>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";
import { AutoPlay } from "@egjs/flicking-plugins";

export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new AutoPlay()]
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ circular: true, horizontal: false }" [plugins]="plugins">
  <div flicking-panel class="weather-panel">...</div>
  <div flicking-panel class="weather-panel">...</div>
  <div flicking-panel class="weather-panel">...</div>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { AutoPlay } from "@egjs/flicking-plugins";

@Component({
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  public plugins: Plugin[] = [new AutoPlay()];
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { AutoPlay } from "@egjs/flicking-plugins";

export default class DemoComponent extends Component {
  private _plugins = [new AutoPlay()];

  public render() {
    return <Flicking circular={true} horizontal={false} plugins={this._plugins}>
      <div className="weather-panel">...</div>
      <div className="weather-panel">...</div>
      <div className="weather-panel">...</div>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { AutoPlay } from "@egjs/flicking-plugins";

const plugins = [new AutoPlay()];
</script>

<Flicking options={{ circular: true, horizontal: false }} plugins={plugins}>
  <FlickingPanel class="weather-panel">...</FlickingPanel>
  <FlickingPanel class="weather-panel">...</FlickingPanel>
  <FlickingPanel class="weather-panel">...</FlickingPanel>
</Flicking>

Date Selector

JAN

FEB

MAR

APR

MAY

JUN

JUL

AUG

SEP

OCT

NVM

DEC

1970

1971

1972

1973

1974

1975

1976

1977

1978

1979

1980

1981

1982

1983

1984

1985

1986

1987

1988

1989

1990

1991

1992

1993

1994

1995

1996

1997

1998

1999

2000

2001

2002

2003

2004

2005

2006

2007

2008

2009

2010

2011

2012

2013

2014

2015

2016

2017

2018

2019

2020

2021

2022

2023

2024

2025

2026

2027

2028

2029

2030

2031

2032

2033

2034

2035

2036

2037

2038

2039

2040

2041

2042

2043

2044

2045

2046

2047

2048

2049

2050

2051

2052

2053

2054

2055

2056

2057

2058

2059

2060

2061

2062

2063

2064

2065

2066

2067

2068

2069

html
<div id="flick" class="flicking-viewport vertical">
  <div class="flicking-camera">
    <div class="date-panel">JAN</div>
    <div class="date-panel">FEB</div>
    <div class="date-panel">MAR</div>
    <div class="date-panel">APR</div>
    <div class="date-panel">MAY</div>
    <div class="date-panel">JUN</div>
    <div class="date-panel">JUL</div>
    <div class="date-panel">AUG</div>
    <div class="date-panel">SEP</div>
    <div class="date-panel">OCT</div>
    <div class="date-panel">NVM</div>
    <div class="date-panel">DEC</div>
  </div>
  <div class="date-panel-border"></div>
  <div class="shadow-top"></div>
  <div class="shadow-bottom"></div>
</div>

js
import Flicking from "@egjs/flicking";

const updateTransform = e => {
  e.currentTarget.panels.forEach(panel => {
    const rotateVal = -panel.progress * 20;
    const sinRot = Math.sin(Math.abs(rotateVal * Math.PI / 180));
    const depth = 150 * sinRot * sinRot;
    panel.element.style.transform = `translateZ(-${depth}px) rotateX(${rotateVal}deg)`;
  });
};
const flicking = new Flicking("#flick", {
  horizontal: false
});

flicking.on("ready", updateTransform)
flicking.on("move", updateTransform)

DemoComponent.jsx
import { Component } from "react";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";

const updateTransform = e => {
  e.currentTarget.panels.forEach(panel => {
    const rotateVal = -panel.progress * 20;
    const sinRot = Math.sin(Math.abs(rotateVal * Math.PI / 180));
    const depth = 150 * sinRot * sinRot;
    panel.element.style.transform = `translateZ(-${depth}px) rotateX(${rotateVal}deg)`;
  });
};

export default class DemoComponent extends Component {
  public render() {
    return <Flicking horizontal={false} onReady={updateTransform} onMove={updateTransform}>
      <div className="date-panel">JAN</div>
      <div className="date-panel">FEB</div>
      <div className="date-panel">MAR</div>
      <div className="date-panel">APR</div>
      <div className="date-panel">MAY</div>
      <div className="date-panel">JUN</div>
      <div className="date-panel">JUL</div>
      <div className="date-panel">AUG</div>
      <div className="date-panel">SEP</div>
      <div className="date-panel">OCT</div>
      <div className="date-panel">NVM</div>
      <div className="date-panel">DEC</div>
      <ViewportSlot>
        <div className="date-panel-border"></div>
        <div className="shadow-top"></div>
        <div className="shadow-bottom"></div>
      </ViewportSlot>
    </Flicking>;
  }
}

template
<Flicking :options="{ horizontal: false }" @ready="updateTransform" @move="updateTransform">
  <div class="date-panel">JAN</div>
  <div class="date-panel">FEB</div>
  <div class="date-panel">MAR</div>
  <div class="date-panel">APR</div>
  <div class="date-panel">MAY</div>
  <div class="date-panel">JUN</div>
  <div class="date-panel">JUL</div>
  <div class="date-panel">AUG</div>
  <div class="date-panel">SEP</div>
  <div class="date-panel">OCT</div>
  <div class="date-panel">NVM</div>
  <div class="date-panel">DEC</div>
  <div slot="viewport" class="date-panel-border"></div>
  <div slot="viewport" class="shadow-top"></div>
  <div slot="viewport" class="shadow-bottom"></div>
</Flicking>

script
import Flicking from "@egjs/vue-flicking";

export default {
  components: {
    Flicking
  },
  methods: {
    updateTransform: e => {
      e.currentTarget.panels.forEach(panel => {
        const rotateVal = -panel.progress * 20;
        const sinRot = Math.sin(Math.abs(rotateVal * Math.PI / 180));
        const depth = 150 * sinRot * sinRot;
        panel.element.style.transform = `translateZ(-${depth}px) rotateX(${rotateVal}deg)`;
      });
    }
  }
}

template
<Flicking :options="{ horizontal: false }" @ready="updateTransform" @move="updateTransform">
  <div class="date-panel">JAN</div>
  <div class="date-panel">FEB</div>
  <div class="date-panel">MAR</div>
  <div class="date-panel">APR</div>
  <div class="date-panel">MAY</div>
  <div class="date-panel">JUN</div>
  <div class="date-panel">JUL</div>
  <div class="date-panel">AUG</div>
  <div class="date-panel">SEP</div>
  <div class="date-panel">OCT</div>
  <div class="date-panel">NVM</div>
  <div class="date-panel">DEC</div>
  <template #viewport>
    <div class="date-panel-border"></div>
    <div class="shadow-top"></div>
    <div class="shadow-bottom"></div>
  </template>
</Flicking>

script
import Flicking from "@egjs/vue3-flicking";

export default {
  components: {
    Flicking
  },
  methods: {
    updateTransform: e => {
      e.currentTarget.panels.forEach(panel => {
        const rotateVal = -panel.progress * 20;
        const sinRot = Math.sin(Math.abs(rotateVal * Math.PI / 180));
        const depth = 150 * sinRot * sinRot;
        panel.element.style.transform = `translateZ(-${depth}px) rotateX(${rotateVal}deg)`;
      });
    }
  }
}

demo.component.html
<ngx-flicking [options]="{ horizontal: false }" (ready)="updateTransform($event)" (move)="updateTransform($event)">
  <div flicking-panel class="date-panel">JAN</div>
  <div flicking-panel class="date-panel">FEB</div>
  <div flicking-panel class="date-panel">MAR</div>
  <div flicking-panel class="date-panel">APR</div>
  <div flicking-panel class="date-panel">MAY</div>
  <div flicking-panel class="date-panel">JUN</div>
  <div flicking-panel class="date-panel">JUL</div>
  <div flicking-panel class="date-panel">AUG</div>
  <div flicking-panel class="date-panel">SEP</div>
  <div flicking-panel class="date-panel">OCT</div>
  <div flicking-panel class="date-panel">NVM</div>
  <div flicking-panel class="date-panel">DEC</div>
  <div in-viewport class="date-panel-border"></div>
  <div in-viewport class="shadow-top"></div>
  <div in-viewport class="shadow-bottom"></div>
</ngx-flicking>

demo.component.ts
import { Component } from "@angular/core";
import Flicking from "@egjs/ngx-flicking";

@Component({
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  updateTransform = e => {
    e.currentTarget.panels.forEach(panel => {
      const rotateVal = -panel.progress * 20;
      const sinRot = Math.sin(Math.abs(rotateVal * Math.PI / 180));
      const depth = 150 * sinRot * sinRot;
      panel.element.style.transform = `translateZ(-${depth}px) rotateX(${rotateVal}deg)`;
    });
  }
}

DemoComponent.jsx
import { Component } from "preact";
import Flicking, { ViewportSlot } from "@egjs/preact-flicking";

const updateTransform = e => {
  e.currentTarget.panels.forEach(panel => {
    const rotateVal = -panel.progress * 20;
    const sinRot = Math.sin(Math.abs(rotateVal * Math.PI / 180));
    const depth = 150 * sinRot * sinRot;
    panel.element.style.transform = `translateZ(-${depth}px) rotateX(${rotateVal}deg)`;
  });
};

export default class DemoComponent extends Component {
  public render() {
    return <Flicking horizontal={false} onReady={updateTransform} onMove={updateTransform}>
      <div className="date-panel">JAN</div>
      <div className="date-panel">FEB</div>
      <div className="date-panel">MAR</div>
      <div className="date-panel">APR</div>
      <div className="date-panel">MAY</div>
      <div className="date-panel">JUN</div>
      <div className="date-panel">JUL</div>
      <div className="date-panel">AUG</div>
      <div className="date-panel">SEP</div>
      <div className="date-panel">OCT</div>
      <div className="date-panel">NVM</div>
      <div className="date-panel">DEC</div>
      <ViewportSlot>
        <div className="date-panel-border"></div>
        <div className="shadow-top"></div>
        <div className="shadow-bottom"></div>
      </ViewportSlot>
    </Flicking>;
  }
}

DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
const updateTransform = e => {
  e.detail.currentTarget.panels.forEach(panel => {
    const rotateVal = -panel.progress * 20;
    const sinRot = Math.sin(Math.abs(rotateVal * Math.PI / 180));
    const depth = 150 * sinRot * sinRot;
    panel.element.style.transform = `translateZ(-${depth}px) rotateX(${rotateVal}deg)`;
  });
};
</script>

<Flicking options={{ horizontal: false }} on:ready={updateTransform} on:move={updateTransform}>
  <FlickingPanel class="date-panel">JAN</FlickingPanel>
  <FlickingPanel class="date-panel">FEB</FlickingPanel>
  <FlickingPanel class="date-panel">MAR</FlickingPanel>
  <FlickingPanel class="date-panel">APR</FlickingPanel>
  <FlickingPanel class="date-panel">MAY</FlickingPanel>
  <FlickingPanel class="date-panel">JUN</FlickingPanel>
  <FlickingPanel class="date-panel">JUL</FlickingPanel>
  <FlickingPanel class="date-panel">AUG</FlickingPanel>
  <FlickingPanel class="date-panel">SEP</FlickingPanel>
  <FlickingPanel class="date-panel">OCT</FlickingPanel>
  <FlickingPanel class="date-panel">NVM</FlickingPanel>
  <FlickingPanel class="date-panel">DEC</FlickingPanel>
  <svelte:fragment slot="viewport">
    <div class="date-panel-border"></div>
    <div class="shadow-top"></div>
    <div class="shadow-bottom"></div>
  </svelte:fragment>
</Flicking>

Demos

Panel add / remove​

Nested Flickings​

Variable Size Panels​

Horizontal Scroller​

Grid​

Vertical Display​

Date Selector​