Карусельные слайды с полимером

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;. Попробуйте изменить это свойство и проверьте размещение родительского элемента.

Поскольку я не нашел карусель готова, я также разрабатывает одно: https://github.com/discovery-tecnologia/dsc-polymer-carousel

Я надеюсь, что я помог