Question

我想在我使用聚合物（https://www.polymer-project.org/）构建的网站上添加图像轮播。但我无法找到具有该功能的任何核心元素/纸质元素。但是我找到了一个库（https://github.com/addyosmani/polymer-ui-carousel），但却无法实现它。请帮我在我的聚合物网站上实现图像轮播。

我使用的代码是： -

<html class="polymer-ui-full-bleed">
    <head>

          <title>Just a new app</title>

          <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

          <script src="../bower_components/platform/platform.js"></script>

          <link rel="import" href="../bower_components/font-roboto/roboto.html">
          <link rel="import"
          href="../bower_components/core-header-panel/core-header-panel.html">
          <link rel="import"
              href="../bower_components/core-toolbar/core-toolbar.html">
          <link rel="import"
              href="../bower_components/paper-tabs/paper-tabs.html">
          <link rel="import" href="post-card.html">
          <link rel="import" href="post-list.html">
          <link rel="import" href="../bower_components/polymer-ui-carousel/polymer-ui-carousel.html">
          <link rel="stylesheet" href="../bower_components/polymer-ui-base-css/base.css">
          <link rel="stylesheet" href="../bower_components/polymer-ui-carousel/smoke.css">

          <style>
          html,body {
            height: 100%;
            margin: 0;
            background-color: #E5E5E5;
            font-family: 'RobotoDraft', sans-serif;
          }
          .container {
            width: 80%;
            margin: 50px auto;
          }
          @media (min-width: 481px) {
            #tabs {
              width: 200px;
            }
            .container {
              width: 400px;
            }
          }
          core-header-panel {
          height: 100%;
          overflow: auto;
          -webkit-overflow-scrolling: touch; 
        }
        core-toolbar {
          background: #03a9f4;
          color: white;
        }
        #tabs {
          width: 100%;
          margin: 0;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          text-transform: uppercase;
        }
          </style>


        </head>

        <body class="polymer-ui-body-text polymer-ui-full-bleed polymer-ui-light-bg" unresolved>

            <core-header-panel>

          <core-toolbar>

            <paper-tabs id="tabs" selected="all" self-end>
            <paper-tab name="all">All</paper-tab>
            <paper-tab name="favorites">Favorites</paper-tab>
          </paper-tabs>
          </core-toolbar>
          <div class="container" layout vertical center>

          <post-list show="all"></post-list>

          <h1>&lt;polymer-ui-carousel&gt;</h1>
          <h2>With bullet controls</h2>

          <polymer-ui-carousel>
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
          </polymer-ui-carousel>

        </div>




          <!-- main page content will go here --> 

        </core-header-panel>


        <script>
          var tabs = document.querySelector('paper-tabs');
          var list = document.querySelector('post-list');

            tabs.addEventListener('core-select', function() {
              list.show = tabs.selected;
            });

          tabs.addEventListener('core-select', function() {
            console.log("Selected: " + tabs.selected);
          });
        </script>
        </body>

    </html>

安装Polymer-ui-carousel（https://github.com/addyosmani/polymer-ui-carousel）后，我收到此错误。

Exception caught during observer callback: TypeError: Cannot read property 'children' of null
    at polymer-ui-carousel.items (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:220:28)
    at polymer-ui-carousel.Polymer.valueToSelection (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:278:30)
    at polymer-ui-carousel.Polymer.updateSelected (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:255:16)
    at polymer-ui-carousel.Polymer.selectedChanged (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:245:14)
    at polymer-ui-carousel.g.invokeMethod (http://localhost:9000/bower_components/polymer/polymer.js:13:25932)
    at polymer-ui-carousel.g.notifyPropertyChanges (http://localhost:9000/bower_components/polymer/polymer.js:13:24037)
    at Object.x.report_ (http://localhost:9000/bower_components/polymer/polymer.js:12:18266)
    at Object.S.check_ (http://localhost:9000/bower_components/polymer/polymer.js:12:22604)
    at c (http://localhost:9000/bower_components/polymer/polymer.js:12:12173) polymer.concat.js:4861x.report_ polymer.concat.js:4861S.check_ polymer.concat.js:5264c polymer.concat.js:4757

Answer 1

导入Web组件＆＃39;填充工具：

<script src="platform.js"></script>

导入自定义元素：

<link rel="import" href="polymer-ui-carousel.html">

开始使用它！简单包括您的代码

使用子弹控件：

<polymer-ui-carousel>
  <div>here your code</div>
  <div>here your code</div>
  <div>here your code</div>
  <div>and so on</div>
</polymer-ui-carousel>

使用文本标签控件：

<polymer-ui-carousel labels="true">
  <div title="Alpha">here your code</div>
  <div title="Beta">here your code</div>
  <div title="Gamma">here your code</div>
  <div title="Delta">and so on</div>
</polymer-ui-carousel>

Answer 2

您的安装将包含一个包含/bower_components子文件夹的bower文件夹。您将需要在该目录中键入bower install --save polymer-ui-carousel命令。您可以通过在环境路径中添加bower（取决于您的操作系统）来解决这个问题。

输入命令后，您应在/bower_components中看到一个包含polymer-ui-carousel.html文件的新子文件夹。

如何在聚合物中使用Image carousel

2 个答案: