Rendering elements inside the wrapper element

You can place elements inside the .flicking-viewport element like the following:

JavaScript

html

<div id="flick" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="panel">1</div>
    <div class="panel">2</div>
    <div class="panel">3</div>
  </div>
  <span class="item-inside-viewport"></span>
  <span class="item-inside-viewport"></span>
</div>

js

import Flicking from "@egjs/flicking";

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

React

DemoComponent.jsx

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

export default class DemoComponent extends Component {
  public render() {
    return <Flicking circular={true}>
      <div className="panel">1</div>
      <div className="panel">2</div>
      <div className="panel">3</div>
      <ViewportSlot>
        <span className="item-inside-viewport"></span>
        <span className="item-inside-viewport"></span>
      </ViewportSlot>
    </Flicking>;
  }
}

Vue@2

template

<Flicking :options="{ circular: true }">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
  <span slot="viewport" class="item-inside-viewport"></span>
  <span slot="viewport" class="item-inside-viewport"></span>
</Flicking>

script

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

export default {
  components: {
    Flicking
  }
}

Vue@3

template

<Flicking :options="{ circular: true }">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
  <template #viewport>
    <span class="item-inside-viewport"></span>
    <span class="item-inside-viewport"></span>
  </template>
</Flicking>

script

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

export default {
  components: {
    Flicking
  }
}

Angular

demo.component.html

<ngx-flicking [options]="{ circular: true }">
  <div flicking-panel class="panel">1</div>
  <div flicking-panel class="panel">2</div>
  <div flicking-panel class="panel">3</div>
  <span in-viewport class="item-inside-viewport"></span>
  <span in-viewport class="item-inside-viewport"></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 {}

Preact

DemoComponent.jsx

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

export default class DemoComponent extends Component {
  public render() {
    return <Flicking circular={true}>
      <div className="panel">1</div>
      <div className="panel">2</div>
      <div className="panel">3</div>
      <ViewportSlot>
        <span className="item-inside-viewport"></span>
        <span className="item-inside-viewport"></span>
      </ViewportSlot>
    </Flicking>;
  }
}

Svelte

DemoComponent.jsx

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

<Flicking options={{ circular: true }}>
  <FlickingPanel class="panel">1</FlickingPanel>
  <FlickingPanel class="panel">2</FlickingPanel>
  <FlickingPanel class="panel">3</FlickingPanel>
  <svelte:fragment slot="viewport">
    <span class="item-inside-viewport"></span>
    <span class="item-inside-viewport"></span>
  </svelte:fragment>
</Flicking>