如何在聚合物中使用圖像傳送帶

我想將圖像傳送帶添加到我正在使用聚合物（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>

安裝聚合物UI的旋轉臺（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

來源

2014-10-29 Vaibhav Ajay Gupta

它總是最好的發佈你到目前爲止的代碼，所以我們可以幫助你。 – ChargerIIC 2014-10-29 15:32:55

@ChargerIIC感謝您的回覆。我被困在第一個命令。即$涼亭安裝 - 保存聚合物 - 用戶 - 傳送帶。當我運行這個命令時，沒有任何事情發生，它只是繼續顯示空白光標。 – 2014-10-30 06:42:44

你好，你解決了嗎？ – 2015-01-26 14:12:05

導入Web Components公司的填充工具：

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

導入自定義元素：

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

開始使用它！簡單的包括你的代碼instaed的

子彈控制：

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

來源

2014-10-29 09:07:45

謝謝@Alex Filatov的回覆，但我無法安裝軟件包。我被困在第一個命令。即$涼亭安裝 - 保存聚合物 - 用戶 - 傳送帶。當我運行這個命令時，沒有任何事情發生，它只是繼續顯示空白光標。 – 2014-10-30 06:46:19

您是否安裝了Bower'npm install -g bower'？ – 2014-10-30 09:57:39

我正在使用yeoman。 – 2014-10-30 10:52:51

您的安裝將包含的/bower_components子文件夾涼亭文件夾。您需要在該目錄中鍵入bower install --save polymer-ui-carousel命令。您可以通過將環境添加到環境路徑（取決於您的操作系統）來解決此問題。

一旦你輸入命令在你應該看到一個新的兒童文件夾/bower_components將包含polymer-ui-carousel.html文件。

來源

2014-10-30 13:50:42 ChargerIIC

感謝您的回覆。現在我可以安裝這個軟件包，但是現在我收到了我編輯過的錯誤信息。 – 2014-10-30 14:50:17

很酷。現在我們回到代碼問題。看起來旋轉木馬不知道首先顯示哪個div。看看Alex Filatov的回答並比較代碼。如果您沒有看到任何區別，請發佈您的信息，我們會爲您提供幫助。 – ChargerIIC 2014-10-30 17:07:12

感謝您的回覆。我已經添加了我正在使用的代碼。我已經比較了代碼，但無法確定我做錯了什麼。 – 2014-10-30 17:40:21

如何在聚合物中使用圖像傳送帶

回答

相關問題