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

答

#slideshow是仅使用intro-slider，当创建的阴影DOM根内部的选择访问的一个自定义元素是通过Polymer函数创建的，它有一个nic其保存由ID元素的引用，因此当聚合物元件准备好，你可以做电子商务$财产以下

Polymer({ 
    is: 'intro-slider', 

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

让我知道，如果它请:)

它看起来像这样的工作，但会是什么如果我想要另一个js资源，如花式框，我需要做些什么？ –

理想情况下，您应该为每件想要做IMO的事情都有一个自定义元素，这样您就可以像放入'>一样放下它，也就是说有一个“”用输入图像初始化滑块等等。另一种肮脏的方式来做你所需要的是使用一个选择器，即使这些东西位于影子根上也可以选择东西，例如'document.querySelector（'body/deep/.fancybox'）' –

我不会推荐使用'/ deep /'，因为它已被弃用https://www.chromestatus.com/features/6750456638341120 – Alan

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

相关推荐