我尝试将光滑的 slider 添加到我的 polymer 元素中，将所需的依赖项放置在主 HTML 文件中，并将它们添加到 polymer 元素的脚本标签中。两种情况都会使 slider 中断。我无法在我的 DOM 中看到为幻灯片元素(img 标签等)生成的新标签。然而，我已经在 Polymer 之外进行了幻灯片放映。 Polymer 真的只用于自定义 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();
});
polymer 元素:
<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 函数创建自定义元素时，它有一个很好的$ 属性，它通过 id 保存对元素的引用，因此当 polymer 元素准备就绪时，您可以执行以下操作
Polymer({
is: 'intro-slider',
ready: function () {
var el = this.$.slideshow
$(el).slick()
}
})
请让我知道它是否有效:)
关于javascript - 有没有一种方法可以将 Slick-Carousel 与 Polymer.js 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33175932/