个人中心
gpt4 book ai didi

javascript - 如何在 polymer 中使用图像轮播

转载 作者：行者123 更新时间：2023-11-30 05:31:35 25 4
gpt4 key购买 nike

我想在我使用 polymer ( https://www.polymer-project.org/ ) 构建的网站上添加图像轮播。但我无法找到具有该功能的任何核心元素/纸张元素。但是我找到了一个库可以做到这一点(https://github.com/addyosmani/polymer-ui-carousel)但无法实现它。请帮助我在我的 polymer 网站中实现图像轮播。

我使用的代码是:-

<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

最佳答案

导入 Web 组件的 polyfill:

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

导入自定义元素:

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

开始使用吧!简单地包含您的代码 instaed of

使用项目符号控件:

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

关于javascript - 如何在 polymer 中使用图像轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26626058/

25 4 0
文章推荐： javascript - 替换 "templateUrl":path with "template":content for angular directives using gulp
文章推荐： javascript - 解析错误 : "Can' t modify username in the before save trigger"and "Validation Failed"
文章推荐： javascript - Chrome——相当于 Firefox\IE 中的应用程序
文章推荐： javascript - 使用 AngularJS 创建一个棋盘
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com