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

Question

I have tried to add the slick slider to my polymer element placing the required dependencies in the main HTML file and adding them inside of the script tag of the polymer element. 我尝试将平滑滑块添加到我的聚合物元素中，将所需的依赖项放在主HTML文件中，并将其添加到聚合物元素的script标签内。 Either scenario renders the slider to break. 任何一种情况都会使滑块断裂。 I am not able to see new tags generated for the slideshow elements (img tags, etc) inside my DOM. 我无法在DOM中看到为幻灯片元素（img标记等）生成的新标记。 I have however had this slideshow work outside of polymer. 但是，我在聚合物之外进行过此幻灯片演示。 Is polymer really only for the customizing of html/css elements without using third party JavaScript files? 聚合物真的只用于自定义html / css元素而不使用第三方JavaScript文件吗？

Main HTML: 主要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: JS：

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

Polymer Element: 聚合物元素：

<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 is only accessible with that selector inside the shadow dom root created by intro-slider , when an custom element is created via the Polymer function it has a nice $ property which holds references to elements by id therefore when the polymer element is ready you can do the following #slideshow仅可通过intro-slider创建的影子dom根内的选择器访问，当通过Polymer函数创建自定义元素时，它具有一个不错的$属性，该属性通过id保存对元素的引用，因此，当聚合物元素准备就绪时，可以做到以下几点

Polymer({ 
  is: 'intro-slider',

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

Let me know if it works please :) 让我知道是否有效:)

有没有一种方法可以将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