Rendering elements inside the wrapper element
You can place elements inside the .flicking-viewport
element like the following:
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
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
});
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>;
}
}
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
}
}
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
}
}
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 {}
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>;
}
}
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>