36

Introducing the eye-catching carousel component Flicking

 4 years ago
source link: https://www.tuicool.com/articles/2yEJ3qz
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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?

iyENjaJ.png!web

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.

beaIFfb.png!web Support cross framework

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

6nqEjm6.jpg

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.

qMRvua6.jpg
getProgress () returns position information for each panel.
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.

Bvu2imI.jpg

getProgress — Mobile
getProgress — Codepen

You’ll also be able to build a sensible UI based on the overall progress.

IFBRJrb.jpg

progress — Mobile
progress — Codepen

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.

3EfMV36.jpg
Parallax Plugin — Mobile

You can also combine Parallax with transparency effects to implement the following services:

QFBbuaJ.jpg

https://m.shopping.naver.com/art/home

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.

UvQneu7.jpg
Free position by 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.

mmQzM3y.png!web iscroll switched to archive mode

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.

R3uqYnF.jpg

UI customization — Mobile
UI customization — Codepen

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.

2ERNJrq.png!web Multiple panels of different sizes.
var flicking = new eg.Flicking(".flicking", {
  circular: true,
});

Examples 1 and Example 2 show examples of their application.

7BBj2uR.png!web

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.

rmiMfeM.png!web Center alignment using Haner & Anchor
var flicking1 = new eg.Flicking(".flicking1", {
    hanger: "50%",
    anchor: "50%"
});
myamAj2.png!web Left alignment using Haner & Anchor
var flicking1 = new eg.Flicking(".flicking1", {
    hanger: 0,
    anchor: 0
});

You can specify the desired position as a reference point as shown below.

ruI3Yze.png!web

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.

yUfMRn2.png!web gap: 20px
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.

VRVZjiE.png!web

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).
rmYbYzJ.gif It is convenient to dynamically increase the number of panels.
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

myIniar.png!web

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.

JBfiyy2.png!web Various badges

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 :star:️ has a lot of strength for us. :pray:


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK