Introducing the eye-catching carousel component Flicking
Does the carousel component that you use play a role in energizing content? Or is it just that kind of carousel component that you’re familiar with?
Flicking has been applied to the NAVER mobile main page since 2011 and is now a carousel component widely used in the NAVER service used by 30 million people every day. Since it was unveiled as an open source project called egjs from 2015, it is now running in a separate github repository called egjs-flicking.
We wanted to convey the philosophy of Flicking v3 that it should be a spotlighter to make the content stand out from the “README”, but it was too restrictive to cover everything.
We hope this document will give you a good overview of the key features of the Flicking component that have not been fully covered in the README.
Support Cross framework ‘properly’
We’ve designed a structure that can effectively and efficiently support a variety of frameworks in response to changes in the development paradigm for higher development productivity.
This structure makes it possible to provide React, Vue, and Angular framework components as well as the Vanilla JavaScript development environment (as of July 1, 2019), and this structure is the foundation to support a variety of frameworks in the future at low cost.
Because of this structural foundation, Flicking has the same usability and behavior as the components of each framework. (Cross-framework support will be introduced in other article.)
In fact, many framework libraries are simply wrapped around a well-known carousel library. This approach has the problem that it must be used in a different way than the way the framework works, or that it can only be used with limited functionality. In particular, it conflicts with the DOM management of the framework, causing data synchronization issues. However, Flicking v3 solves these problems.
Dynamic Interaction
Flicking provides a special function for transforming your dry carousel area into a lively area.
Various Progress
It provides 4 kinds of dynamic progress information such as the position information of each panel according to the movement of the panel (item), the ratio displayed on the screen, and the like.
(Reference: https://naver.github.io/egjs-flicking/features/progress.html)
For example, getProgress() returns the relative position of each panel relative to a specific location.
var flicking1 = new eg.Flicking(".flicking1", {
gap: 10,
circular: true,
});
flicking1.on("move", () => {
flicking1.getAllPanels(true).forEach(function (panel) {
panel.getElement().innerHTML = panel.getProgress().toFixed(2);
});
});You can use this panel-specific status value to create a dynamic UI based on the progress of each panel.
You’ll also be able to build a sensible UI based on the overall progress.
In addition, there are plenty of UI effects you can make if you take advantage of the provided progress information (like getOutsetProgress , getVisibleRatio).
Support Plugins
We provide Parallax, Fade, and AutoPlay Plugin, which are frequently used, based on the above progress information.
The following is an example implementation using the Parallax plug-in.
You can also combine Parallax with transparency effects to implement the following services:
The plugin is separated from the flicking component and is operated in the following plugin repository.
This separate plugin allows you to lighten the Flicking component. Nevertheless you can implement colorful UI through various combination of plugins when necessary. We plan to increase the number of plug-ins that will make your content stand out.
Free Scroll
Moving and panning on a panel-by-pane basis is the default behavior, but you can use options to specify options that allow you to stop at a free position based on your user’s touch intensity.
var flicking = new eg.Flicking(".flicking0", {
gap: 10,
circular: true,
moveType: "freeScroll",
});iScroll is a famous library that provides the same functionality. However, iScroll is no longer operational and has been switched to archiving mode, making it difficult to receive any future improvements or issues.
Flicking can be a good alternative solution.
UI customization
Flicking has been applied to many years of service. We learned that custom UI customization is also very important as we receive feedback from users/developers. As a result, Flicking v3 offers essential options to create a variety of UIs.
Multiple panels & Variable size
Flicking can display multiple panels with different Panel sizes simultaneously by automatically reading the CSS properties assigned to each panel and placing them in the Flicking area.
var flicking = new eg.Flicking(".flicking", {
circular: true,
});Examples 1 and Example 2 show examples of their application.
Flexible Alignment
Flexible alignment helps you make UI that fits your service.
‘Hanger’ and ‘Anchor’ concepts are introduced to allow flexible alignment. ‘Hanger’ is the reference point for the entire area of the carousel, and ‘Anchor’ is the reference point for each panel. The current panel is aligned at the position ‘Anchor’ touches the ‘Hanger’. With this way, you can arrange details in addition to Left, Center, and Right alignments.
var flicking1 = new eg.Flicking(".flicking1", {
hanger: "50%",
anchor: "50%"
});
var flicking1 = new eg.Flicking(".flicking1", {
hanger: 0,
anchor: 0
});You can specify the desired position as a reference point as shown below.
Example 3 is a left-alignment example using ‘Hanger’ and ‘Anchor’.
Gap
You can also specify the gap between panels. The `gap` option allows you to set the spacing between each panel.
var flicking1 = new eg.Flicking(".flicking1", {
gap: 20,
bound: true,
});Depending on your service requirements, you can easily specify the interval between panels that requires fine-tuning.
In Example 4, we can see that the gap between panels becomes clearer by specifying a gap.
Convenient dynamic panel management
Dynamic addition of panels is convenient.
- When a new panel is needed, the event tells you when a new panel is needed.
- Flicking provides methods for dynamic addition of a panel (although in the framework, if you configure a panel based on panel information, it is automatically added to the DOM).
var flicking1 = new eg.Flicking(".flicking1", {
gap: 10,
infinite: true,
infiniteThreshold: 50,
});flicking1.on("needPanel", function (e) {
var length = flicking1.getPanelCount();e.panel.insertAfter(/* panel to add*/);
flickingPagination1.update(flicking1);
});
In Example 5, you can see more examples.
Stable service support
Flicking is widely used in NAVER services, where 30 million users visit every day. Therefore, providing stable service is a very important part.
Flicking reflects feedback in various environments through various services. To keep good quality, we have regularized unit testing with a code coverage of over 91%(July 2019), and we maintain good ratings through code quality management tools.
Conclusion
Over the last seven years Flicking has been used throughout NAVER services. We have continuously improved to provide stable and reliable quality to 30 million users every day.
Flicking v3 was able to build a user-friendly UI based on stable quality over the years. We also considered various framework support methods that adapt to changes in development environment. In addition, we thought about how developers can develop intuitively and easily.
Flicking was created through these troubles and feedback from Naver developers. We hope that Flicking will be able to get more people’s consensus. and we expect that Flicking can be used more in more web services.
Finally, since egjs is an open source project, we are always waiting for your participation and feedback. Your feedback and participation are the driving force in creating a better product.
Your ⭐️ has a lot of strength for us. 🙏
