有沒有一種方法可以將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