有没有一种方法可以将Slick-Carousel与Polymer.js一起使用？

Question

我尝试将平滑滑块添加到我的聚合物元素中，将所需的依赖项放在主HTML文件中，并将其添加到聚合物元素的script标签内。 任何一种情况都会使滑块断裂。 我无法在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函数创建自定义元素时，它具有一个不错的$属性，该属性通过id保存对元素的引用，因此，当聚合物元素准备就绪时，可以做到以下几点

Polymer({ 
  is: 'intro-slider',

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

让我知道是否有效:)

有没有一种方法可以将Slick-Carousel与Polymer.js一起使用？

问题描述

1 个解决方案

解决方案1
1 2015-10-16 17:45:52

有没有一种方法可以将Slick-Carousel与Polymer.js一起使用？

问题描述

1 个解决方案

解决方案1 1 2015-10-16 17:45:52

解决方案1
1 2015-10-16 17:45:52