Flexslider - 固定画像での充電

Question

Flexsliderを使用していますが、画像が読み込まれて機能が実行されていない間に、画像が下に再生され、巨大なスクロールバーが生成され、通常は。

質問は次のとおりです。画像を持ち歩く前に同じ位置に画像を維持することはできませんか？この巨大なスクロールバーを生成しないようにします。

次のコード：

HTML：

<div class="sliderTrabalhe" ng-init="vm.sliderTrabalhe();"> 
    <ul class="slides"> 
     <li ng-repeat="s in vm.repeat(7) track by $index"> 
     <div class="image" style="background-image: url('app/template/img/slider.jpg');"></div> 
     </li> 
    </ul> 
    </div> 

機能：

vm.sliderTrabalhe = function() { 
    setTimeout(function() { 
     $('.sliderTrabalhe').flexslider({ 
     animation: "slide", 
     controlNav: true 
    }); 
    }, 1000); 
} 

CSS：より良い理解のため

.sliderTrabalhe{ 
     position: relative; 
     margin-bottom: 70px; 
     @extend .largura_total; 
     height: 500px; 
     .image{ 
      height: 500px; 
     } 
     .flex-control-nav{ 
      bottom: -30px; 
      left: 50px; 
     } 
     .flex-control-paging li a{ 
      background: $cinza_escuro!important; 
     } 
     .flex-control-paging li a.flex-active{ 
      background: $vermelho!important; 
      width: 15px; 
      height: 15px; 
      padding-top: 2px; 
     } 
     .flex-control-nav li { 
      margin: 0 3px; 
     } 
    } 

次の画像：

前：後

：

Answer 1

CSS：私は画像の高さを削除する場合

.sliderTrabalhe { 
    margin: 0; 
    padding: 0; 
} 
.sliderTrabalhe .slides > li { 
    display: none; 
    -webkit-backface-visibility: hidden; 
} 
.sliderTrabalhe .slides img { 
    width: 100%; 
    display: block; 
} 
.sliderTrabalhe .slides:after { 
    content: "\0020"; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
html[xmlns] .sliderTrabalhe .slides { 
    display: block; 
} 
* html .sliderTrabalhe .slides { 
    height: 1%; 
} 
.no-js .sliderTrabalhe .slides > li:first-child { 
    display: block; 
} 
.sliderTrabalhe { 
    position: relative; 
    zoom: 1; 
} 
.sliderTrabalhe .slides { 
    zoom: 1; 
} 
.sliderTrabalhe .slides img { 
    height: auto; 
    -moz-user-select: none; 
} 
.sliderTrabalhe:hover .flex-direction-nav .flex-prev { 
    opacity: 0.7; 
    left: -20px; 
} 
.sliderTrabalhe:hover .flex-direction-nav .flex-prev:hover { 
    opacity: 1; 
} 
.sliderTrabalhe:hover .flex-direction-nav .flex-next { 
    opacity: 0.7; 
    right: -20px; 
} 
.sliderTrabalhe:hover .flex-direction-nav .flex-next:hover { 
    opacity: 1; 
} 

.sliderTrabalhe .flex-direction-nav a{ 
    width: 19px; 
    height: 32px; 
    margin: 0; 
} 

Answer 2

このスライダーのデモをアップロードしてください。あなたの試みですか？ ：

.image 
{ 
    width:100%; 
    height:auto; 
} 

とスタイル：バグ削除する

background-size: cover;