Question

我试图将光滑的滑块添加到我的聚合物元素中，将所需的依赖项放在主HTML文件中，并将它们添加到聚合物元素的脚本标记内。这两种情况都会使滑块断开。我无法在DOM中看到为幻灯片元素（img标签等）生成的新标签。然而，我有这种幻灯片在聚合物之外工作。聚合物真的只用于定制html / css元素而不使用第三方JavaScript文件吗？

主要HTML：

<html>
 <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css"/>
    <link rel="import" href="intro-slider.html">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js">    </script>
   <script src="main.js"></script>
</head>
<body>
  <intro-slider></intro-slider>
  </body>
  </html>

JS：

$(document).ready(function(){
   $('#slideshow').slick();
 });

聚合物元素：

<link rel="import"
  href="bower_components/polymer/polymer.html">

<link rel="import"
  href="bower_components/polymer/polymer.html">
<link rel="import">

<dom-module id="intro-slider">

  <template>
<!-- scoped CSS for this element -->
<div>

<div class="banner-img">
  <div class="banner-pattern">
  <div class="container" id="intro">
    <h2 class="text-center" style="font-size:44px; ">WELCOME TO SOMETHING HERE</h2>
    <p class='intro__text'> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur saepe placeat quam sequi cum perspiciatis, quasi! Quidem quas sed, porro aliquid molestiae, magni facere tempora fugiat dolorum, minima non voluptatum.</p>

  <div id="slideshow">
    <div><a href="/"   rel="group" class="fancybox"> <img src="http://placehold.it/150x150" height="150" alt=""></a></div>
    <div><a href="/"  rel="group"  class="fancybox"> <img src="http://placehold.it/150x150" height="150" alt=""></a></div>
    <div><a href="/"  rel="group" class="fancybox"> <img src="http://placehold.it/150x150" height="150" alt=""></a></div>
  </div>
  </div>
</div>
   </div>
  <content></content>
</div>
  </template>
   <script>
     Polymer({ is: "intro-slider" });
  </script>
</dom-module>

Answer 1

#slideshow只能在intro-slider创建的影子dom根目录中使用该选择器访问，当通过Polymer函数创建自定义元素时，它具有保存引用的良好$属性因此，当聚合物元素准备就绪时，您可以执行以下操作：

Polymer({ 
  is: 'intro-slider',

  ready: function () {
    var el = this.$.slideshow
    $(el).slick()
  }
})

请告诉我是否有效：）

有没有办法可以使用Slick-Carousel和Polymer.js？

1 个答案: