Please have a look at this Helpx article :- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html
// Creating Custom Carousel components for Adobe Experience Manager
Add the JQuery Carousel API to a CQ:ClientLibraryFolder node
You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP.
To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.
To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.
Read this article, this will help you.
Reference articles :-
// Integrating custom Adobe Experience Manager Component with third-party libraries
I hope this would help you.
Thanks and Regards
Here are the detailed steps required to get this to work ...
The best documentation to look at before getting into the more complex samples is the overview of how ClientLibs are created and implemented here: https://docs.adobe.com/docs/en/aem/6-2/develop/the-basics/clientlibs.html. I highly recommend you try to implement client libs in a "hello world" example using lots of "console.log("");" in your own code to make sure the code is actually executing. I'd avoid implementing ClientLibs into forms until you've got the concept working outside in a simple page because errors and events that don't fire as part of a form can be "hidden" from you. When script fails in a rule for example, you won't necessarily see anything in the console log. With a plain JSP page for example, you'll see all your events and messages uninterrupted.
In regards to the client library field in the forms UI, the best way to get to this is to switch to your form component view where you can see all your panels and objects, click on the root panel, then click on the configure wheel that appears when the panel is selected. Alternatively (and more simply), switch to classic view and then edit the main panel.
Watching the tutorials, they have created custom controls and add code to the JSP page to load the clientlibs there. I thought the new forms were supposed to load your custom libraries based on the clientLibRef setting.
I tried again where I created a folder, then created an adaptive form and two form fragments. Also from this folder, I added a clientlibs folder of type cq:ClientLibraryFolder and added a property categories of String type. I set a value for the categories and added that to the clientLibRef property of the form. I see where there is a setting for this in the JSON string for the page but the custom script and styles are not loaded.
The example shows the client lib added to a custom control then adding the clientlib under that control and then adding the inclusion to the JSP code for the control. So I am lead to assume that I also have to create a custom page control and add all of the references and code in the custom control. Is that correct?
when you create your client lib, there is a property called categories
you can assign any name to this property
then use this name in the AF
suggest you read this link
What is the CQ name for this property? I have added the path to the client library in the clientLibRef property on the guide container but it doesn't load the script file. There is a reference to the path in the JSON string but nothing gets loaded.
create your client lib add js and CSS files to your clientlibs folder . Add the newly created client lib 's category to the Adaptive Form . You will have to go to the adaptive form container and there is a property called client libs library. Set its value to the category of the newly created client lib