How to use Jquery lib in Magento 2

Question

Platform: Magento2

I want to import and use 3nd Jquery library in my module. Eg: https://www.jqueryscript.net/other/SEO-friendly-jQuery-Infinite-Scroll-Plugin-Clever-Infinite-Scroll.html use to create infinate scroll loading.

I try this:

var config = {
    paths: {
        'clever': 'Test_Example/js/lib/clever'
    },
    shim: {
        'clever': ['jquery']
    }
};

then use it in template:

<script>
    require([
        'jquery',
        'Test_Example/js/lib/clever'
    ], function($){
        console.log($('.product-items'));
        $('.product-items').cleverInfiteScroll({
            // for custom selectors
            contentsWrapperSelector: '.product-items',
            contentSelector: '.product-item-custom',
            nextSelector: '.next',

            // path to the loader GIF
            loadImage: 'Test_Example/images/loader.gif',

            // set the offset distance for fetching next page
            offset: 0,

        });
    });
</script>

but does not work.

I also try this tut: https://devdocs.magento.com/guides/v2.4/coding-standards/code-standard-jquery-widgets.html, but it is not helpful.

How can i do that?

Answer 1

Simple Change below code

require([
        'jquery',
        'Test_Example/js/lib/clever'
    ], function($){

to

require([
        'jquery',
        'clever'
    ], function($,clever){

Update

---

Added "clever"

function($){

to

function($,clever){

Answer 2

You haven't included an alias for Clever.

Change function($) to function($, cleverInfiteScroll)