How to integrate external library (slick) and utilize it into MarkoJS?

Question

I am beginner to the MarkoJS technology. I am looking to create a carousel (slider with multiple items) component through MarkoJS. The issue i am facing to load external libraries (like Jquery) into MarkoJS. Not found any way to load external libraries and use them through marko.

The library i was looking to integrate with MarkoJS is jquery and slick (carousel). It would be appreciated if one can suggest me a way for loading external JS/Jquery code into MarkoJS. So, that i can easily manipulate the DOM.

The thing, i was looking for is DOM manipulation through MarkoJS and how to use the selectors in MarkoJS ?

Some possibilities already been tried:

• Though, i am not using any library here. I am able to build a carousel slider through CSS which i don't want to.
• Second, have tried to built a logic to implement the slider through the Marko itself. But, again find a difficulty while selecting a DOM elements.

Answer 1

Making use of an existing jQuery plugin is fairly painless with Marko. In the case of slick, it is available on npm, so you can import it in your template and attach it on mount to your component's root element:

import Slick from 'slick-carousel';

class {
  onMount() {
    this.slick = new Slick(this.el);
  }
}

<div>
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

You'll also need to make sure you've got a module bundler set up to get your dependencies to the browser. Here's some examples using webpack and lasso with Marko. You can also use the starter project, which has a bundler already set up.