Question

我正在尝试将Owl Carousel合并到使用Polymer的自定义Web组件中。我已经成功地做到了这一点，但Owl Carousel没有正常行事。

使用触摸或鼠标输入拖动轮播时，它会重置为开头。在Polymer自定义元素之外使用Owl Carousel可以正常运行。

所以说我单击导航按钮查看我的旋转木马中的项目5,6,7，当我通过鼠标或触摸拖动时，旋转木马将重置为项目1.

有没有人知道为什么会出现这个问题？

            <link rel="import" href="../polymer/polymer.html">
            <link rel="import" href="../core-toolbar/core-toolbar.html">
            <link rel="import" href="../core-header-panel/core-header-panel.html">
            <link rel="import" href="../core-icons/core-icons.html">
            <link rel="import" href="../paper-icon-button/paper-icon-button.html">
            <link rel="import" href="../paper-fab/paper-fab.html">
            <link rel="import" href="../paper-shadow/paper-shadow.html">

            <!--  jQuery 1.7+  -->
            <script src="../../jquery-2.1.1.min.js"></script>

            <!-- Include js plugin -->
            <script src="../../owl-carousel/owl.carousel.js"></script>


            <polymer-element name="my-element">
              <template>
                <style>

                  #owl .item{
                    background: #a1def8;
                    display: block;
                    color: #FFF;
                    -webkit-border-radius: 3px;
                    -moz-border-radius: 3px;
                    border-radius: 3px;
                    text-align: center;
                    width: 170px;
                    height: 200px;
                    margin: 0 auto;
                  }

                </style>

                <!-- Important Owl stylesheet -->
                <link rel="stylesheet" href="../../owl-carousel/owl.carousel.css">

                <!-- Default Theme -->
                <link rel="stylesheet" href="../../owl-carousel/owl.theme.css">

                  <div id="owl" class="owl-carousel owl-theme"></div>
              </template>
              <script>
                Polymer({
                  domReady: function() {
                    $(this.$.owl).owlCarousel({
                      jsonPath : "../../data.json",
                      navigation: true,
                      pagination: false
                    });
                  }
                });
              </script>
            </polymer-element>

Answer 1

我的结论是，这是一个与Shadow DOM相关的问题。 Owl Carousel与Light DOM一起使用，但将其包装在自定义元素中会将其移动到Shadow DOM，其中Owl Carousel无法正常运行。

使用Owl Carousel作为Polymer的自定义元素的问题

1 个答案: