<header class="my-4"><div class="hero" style="overflow:hidden"><div class="container main-logo-container mb-4"><div class="main-logo-wrapper"><div class="flicking-viewport"><div class="flicking-camera"><div class="main-logo-box"><p class="image is-1by1"></p></div><div class="main-logo-box"><p class="image is-1by1"></p></div><div class="main-logo-box"><p class="image is-1by1"></p></div><div class="main-logo-box"><p class="image is-1by1"></p></div><div class="main-logo-box"><p class="image is-1by1"></p></div></div></div></div><img class="flicking-logo" src="img/flicking.svg"></div><div class="block is-flex is-justify-content-center"><a class="button mr-2" href="/egjs-flicking/docs">🚀 Get Started</a><a href="https://github.com/naver/egjs-flicking" target="_blank" rel="noopener noreferrer" class="button pl-5" style="border-radius:4px 0 0 4px"><span class="icon is-small mr-2"><img src="img/icons/github.svg"></span><span>GitHub</span></a><a href="https://github.com/naver/egjs-flicking/stargazers" target="_blank" rel="noopener noreferrer" class="button" style="border-radius:0 4px 4px 0;border-left:0"><img src="img/icons/star.svg"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/naver/egjs-flicking?color=%23ffffff&label=%20&style=for-the-badge"></a></div></div></header><article class="container mb-6"><div class="block mb-6"><p class="title"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="main-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path></svg> Framework Ready</p><p class="subtitle">Use Flicking in your favorite framework!</p><div class="flicking-viewport mb-2"><div class="flicking-camera"><div class="framework-logo button mr-2 is-danger"><div class="framework-logo-wrapper mr-2"><img src="img/icons/angular.svg"></div><span>@egjs/ngx-flicking</span></div><div class="framework-logo button mr-2 is-info"><div class="framework-logo-wrapper mr-2"><img src="img/icons/react.svg"></div><span>@egjs/react-flicking</span></div><div class="framework-logo button mr-2 is-success"><div class="framework-logo-wrapper mr-2"><img src="img/icons/vue.svg"></div><span>@egjs/vue-flicking</span></div><div class="framework-logo button mr-2 is-light"><div class="framework-logo-wrapper mr-2"><img src="img/icons/svelte.svg"></div><span>@egjs/svelte-flicking</span></div><div class="framework-logo button mr-2 is-vue3_bD0B"><div class="framework-logo-wrapper mr-2"><img src="img/icons/vue.svg"></div><span>@egjs/vue3-flicking</span></div><div class="framework-logo button mr-2 is-warning"><div class="framework-logo-wrapper mr-2"><img src="img/icons/preact.svg"></div><span>@egjs/preact-flicking</span></div></div></div></div><div class="block my-6"><p class="title"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="main-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="m12 7.13.97 2.29.47 1.11 1.2.1 2.47.21-1.88 1.63-.91.79.27 1.18.56 2.41-2.12-1.28-1.03-.64-1.03.62-2.12 1.28.56-2.41.27-1.18-.91-.79-1.88-1.63 2.47-.21 1.2-.1.47-1.11.97-2.27M12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z"></path></svg> Features</p><div class="columns"><div class="column"><div class="box"><div class="block is-flex is-flex-direction-row is-align-items-center"><figure class="image is-32x32 mx-5"><img src="img/icons/typescript.svg"></figure><span class="subtitle has-text-black">Typescript</span></div><div class="block"><p>Flicking is fully written in <a href="https://www.typescriptlang.org/" target="_blank">Typescript</a>, and every classes, properties, and events are correctly typed and exported.</p></div></div><div class="box"><div class="block is-flex is-flex-direction-row is-align-items-center"><figure class="image is-32x32 mx-5"><img src="img/icons/nuxt.svg"></figure><span class="subtitle has-text-black">SSR</span></div><div class="block">Flicking is designed to support Server-Side Rendering(SSR), and can be used with famous SSR frameworks like <a href="https://nextjs.org/" target="_blank">Next.js</a> or <a href="https://nuxtjs.org/" target="_blank">Nuxt.js</a>.</div></div></div><div class="column"><div class="box"><div class="block is-flex is-flex-direction-row is-align-items-center"><figure class="image is-32x32 mx-5"><img src="img/icons/books.svg"></figure><span class="subtitle has-text-black">Rich API</span></div><div class="block"><p>Flicking comes with a rich API. You can use it to create your own customized Flicking & Plugins.</p><p>Check our <a href="/egjs-flicking/docs/api/Flicking">API Docs</a></p></div></div><div class="box"><div class="block is-flex is-flex-direction-row is-align-items-center"><figure class="image is-32x32 mx-5"><img src="img/icons/extension.svg"></figure><span class="subtitle has-text-black">Plugins</span></div><div class="block"><p>Flicking can be enhanced with a set of plugins, like AutoPlay, Fade, and Parallax.</p><p>See more at <a href="/egjs-flicking/plugins">Plugins</a></p></div></div></div><div class="column"><div class="box"><div class="block is-flex is-flex-direction-row is-align-items-center"><figure class="image is-32x32 mx-5"><img src="img/icons/internetexplorer.svg"></figure><span class="subtitle has-text-black">Supports IE9+ (With polyfills)</span></div><div><p>With the Promise polyfill and flicking-inline CSS, Flicking can support Internet Explorer 9+</p><p>⚠️ IE 11+ for Angular & Svelte</p></div></div><div class="box"><div class="block is-flex is-flex-direction-row is-align-items-center"><figure class="image is-32x32 mx-5"><img src="img/icons/arrow_right.svg"></figure><span class="subtitle has-text-black">Progress</span></div><div class="block"><p>Flicking supports progress, which can help to create the most fluent & smooth animation along the panel movement.</p><ul><li><a href="/egjs-flicking/docs/api/Camera#progress">camera.progress</a></li><li><a href="/egjs-flicking/docs/api/Panel#progress">panel.progress</a></li><li><a href="/egjs-flicking/docs/api/Panel#outsetProgress">panel.outsetProgress</a></li></ul></div></div></div></div></div></article><footer><div class="hero is-medium is-warning"><div class="hero-body container"><p class="title has-text-dark is-flex is-align-items-center"><img class="icon is-medium mr-3" src="img/icons/task_alt.svg"><span>Ready to get started?</span></p><p class="subtitle has-text-dark">Check our Options & Demos to see what you can do with Flicking</p><a class="button is-white m-1" href="/egjs-flicking/docs">🚀 Get Started</a><a class="button is-link m-1" href="/egjs-flicking/docs/api/Flicking">📄 API</a><a class="button is-link m-1" href="/egjs-flicking/options">⚙️ Options</a><a class="button is-link m-1" href="/egjs-flicking/demos">✨ Demos</a><a class="button is-link m-1" href="/egjs-flicking/plugins">🛠️ Plugins</a><a class="button is-link m-1" href="/egjs-flicking/showcases">🎭 Showcases</a><a class="button is-link m-1" href="/egjs-flicking/presets">💡 Presets</a></div></div></footer></div>
0 commit comments