ポリマーを使ったカルーセルスライド

Question

ポリマー骨格を使ってカルーセルをやっています。 しかし私が使ったコードは、スライドの画像を自分のペーパーヘッダーの前に置いていました。つまり、カルーセルの画像はうまくスライドしますが、ウェブページをスクロールすると、その画像がページの上に表示されるため、私が使用したペーパーヘッダーに表示されます。 このケースの画像とスライド画像に使用したソースコードを示します。

どうすれば修正できますか？おかげさまで

Example of image on front of paper-header

<dom-module id="home-view"> 
    <style> 
    .leTitreHome { 
     font-size: 1.5em; 
     color: blue; 
     text-align: center; 
    } 

    #myslider { 
     position: static;   
     width:700px; 
     height:700px;    
    } 
    </style> 
    <template> 
    <p class="leTitreHome">Welcome</p> 
    <hr> 
    <br> 
    <div> 
     <paper-card>    
     <div class="card-content"> 
      <div id="myslider"> 
      <img src="../images/bg1.jpg" /> 
      <img src="../images/bg2.jpg"/> 
      <img src="../images/bg3.jpg"/> 
      <img src="../images/bg4.jpg"/> 
      </div> 
     </div>    
     </paper-card> 
    </div> 
    </template> 
    <script> 
    Polymer({ 
     is: 'home-view' 

    }); 
    </script> 
    <script> 
    var imgSlider = new SimpleSlider(
     document.getElementById('myslider'), 
     { 
     transitionProperty: 'opacity', 
     startValue: 0, 
     visibleValue: 1, 
     endValue: 0 
     }); 
    </script> 
</dom-module> 

Answer 1

問題がCSSプロパティposition: static;に関連し得ます。 このプロパティを変更し、親要素の配置を確認してください。

私はカルーセルの準備ができて見つけることができませんでしたので、私も1を開発しています： https://github.com/discovery-tecnologia/dsc-polymer-carousel

私はこの質問の作業plunkerを追加してください