Initializing Third-Party JavaScript Components in LWC

I was working on a project recently and I needed a third-party JavaScript component for it, the Owl Carousel (https://owlcarousel2.github.io/OwlCarousel2/). After reading the documentation on how to load third-party JavaScript libraries in LWC and the documentation on how use Owl Carousel, I still hit a few snags getting it to work in my project. After some tinkering and reading on Stack Overflow, I finally figured it out thank to this great post!

I’ll use Owl Carousel as an example here, but this will work for any JavaScript library that needs to be initialized. First, you need to create a Static Resource that has the JavaScript and CSS files in it and upload to Salesforce in a .zip file:

These are the files I need for Owl Carousel and I needed to download the latest jQuery, which can be found here. Once those files are in a zip file, upload them as a Static Resource to your org:

A Static Resource is a set of JavaScript, CSS, and/or image files that you can upload to your organization and reference in your code. LWC has a built in method to do this called loadStyle/loadScript, depending on what you are referencing. This is done in the renderedCallBack of your component. You then need jQuery just because most third-party components depend on it.

To initialize the Owl Carousel in a component and have it ready for use, I had to load the jQuery library and then load the Owl Carousel JavaScript and CSS files

 renderedCallback() {
        if(this.initialRender){return;}
        this.initialRender = true;
        loadScript(this, '/owlcarousel/jquery-3.4.1.min.js')
            .then(e => {
                loadStyle(this, '/owlcarousel/owl.carousel.min.css')
                loadStyle(this, '/owlcarousel/owl.theme.default.min.css')
                loadScript(this, '/owlcarousel/owl.carousel.min.js')
                .then(() => {
                    const carousel = this.template.querySelector('div[class="owl-carousel owl-theme"]');
                
                    window.$(carousel).owlCarousel({
                            loop:true,
                            nav:true,
                            responsive:{
                                0:{
                                    items:1
                                }
                            }
                        })
                }
          }
} 

A few things to note here:

1. I am using the renderedCallBack method to load these script/styles in. Also, loadScript/Style returns a promise, meaning the operation needs to wait for the response. jQuery is loaded first and then the Owl Carousel is loaded within the jQuery promise.
2. The second promise body holds the initialization of the Owl Carousel component itself. It can be referenced now that the previous dependencies have been loaded.
3. The syntax for initializing the component is:
   window.$([name of queried element]).[initialization method from doc](parameters)

You can follow this structure for loading any JavaScript component you want! Try it for yourself after you create and LWC component!