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;