有沒有一種方法可以在Polymer.js中使用Slick-Carousel？

我試圖將滑動滑塊添加到我的聚合物元素中，將所需的依賴關係放置在主HTML文件中，並將它們添加到聚合物元素的腳本標記中。兩種情況都會呈現滑塊中斷。我無法看到爲我的DOM內的幻燈片元素（img標籤等）生成的新標籤。然而，我已經在聚合物之外進行了這種幻燈片演示。聚合物是否僅用於定製html/css元素而不使用第三方JavaScript文件？有沒有一種方法可以在Polymer.js中使用Slick-Carousel？

主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>

來源

2015-10-16 Coded Container

#slideshow是僅使用intro-slider，當創建的陰影DOM根內部的選擇訪問的一個自定義元素是通過Polymer函數創建的，它有一個nic其保存由ID元素的引用，因此當聚合物元件準備好，你可以做電子商務$財產以下

Polymer({ 
    is: 'intro-slider', 

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

讓我知道，如果它請:)

來源

2015-10-16 17:45:52

它看起來像這樣的工作，但會是什麼如果我想要另一個js資源，如花式框，我需要做些什麼？ –

理想情況下，您應該爲每件想要做IMO的事情都有一個自定義元素，這樣您就可以像放入'>一樣放下它，也就是說有一個「」用輸入圖像初始化滑塊等等。另一種骯髒的方式來做你所需要的是使用一個選擇器，即使這些東西位於影子根上也可以選擇東西，例如'document.querySelector（'body/deep/.fancybox'）' –

我不會推薦使用'/ deep /'，因爲它已被棄用https://www.chromestatus.com/features/6750456638341120 – Alan

有沒有一種方法可以在Polymer.js中使用Slick-Carousel？

回答

相關問題