0

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.
4

2 回答 2

0

使用现有的 jQuery 插件对 Marko 来说是相当轻松的。在 slick 的情况下，它在 上可用npm，因此您可以import在模板中使用它并将其附加到 mount 到组件的根元素上：

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>

你还需要确保你已经设置了一个模块捆绑器来获取你对浏览器的依赖。下面是一些在 Marko 中使用webpack和lasso的示例。您还可以使用已经设置了捆绑器的启动项目。

于 2017-06-14T10:33:29.117 回答
0

但是如果真的需要集成 jquery，有一些方法可以做到这一点：

import $ from 'jquery'

class {
  onMount() {
    $('.myElement', this.el).hide();
  }
}

<div>
  <div.myElement></div>
</div>
于 2017-08-28T19:09:48.243 回答