Quick Start
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
Add the script/CSS to the page.
Or, you can rather import them if you're using a bundler like webpack or rollup.
Then, add some basic HTML layout of Flicking to your page.
You should add the vertical
class to viewport element, if you're making a vertical carousel.
Then initialize Flicking instance with JavaScript after.
You can import & use Flicking as a React Component.
Using the components as a panel
If you're using the React Component as a panel, it should use a ref forwarding
warning
You can't use a React component that renders multiple elements
Bypassing ref forwarding
If you don't like this behavior, there's a few ways to avoid it.
The easiest way is wrapping each Panel
component with another element tag.
Or, you can use the useFindDOMNode
option of Flicking.
caution
Flicking will use findDOMNode instead of using refs when the useFindDOMNode
option is enabled.
So, if you're using the Strict Mode, Flicking can show warning about deprecated findDOMNode usage at the developer console.
And also, be aware that the component should always return a single DOM that never changes.
Therefore findDOMNode only worked if components always return a single DOM node that never changes.
You can register Flicking either locally...
or globally.
Then use Flicking like the other Vue components.
You can register Flicking either locally...
or globally.
Then use Flicking like the other Vue components.
warning
You can't use a Vue component that uses fragments(a.k.a. multi-root node components) as a panel
You can add NgxFlickingModule
at imports
of your app module to use Flicking.
Now you can use the component ngx-flicking
and the directive flicking-panel
in your templates.
You should add directive flicking-panel
to the panel elements you use
You can import & use Flicking as a Preact Component.
Using the components as a panel
If you're using the React Component as a panel, it should use a ref forwarding
warning
You can't use a React component that renders multiple elements
Bypassing ref forwarding
If you don't like this behavior, there's a few ways to avoid it.
The easiest way is wrapping each Panel
component with another element tag.
Or, you can use the useFindDOMNode
option of Flicking.
caution
Flicking will use findDOMNode instead of using refs when the useFindDOMNode
option is enabled.
So, if you're using the Strict Mode, Flicking can show warning about deprecated findDOMNode usage at the developer console.
And also, be aware that the component should always return a single DOM that never changes.
Therefore findDOMNode only worked if components always return a single DOM node that never changes.