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

请上传此滑块的演示。你试试？ :

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

风格：

background-size: cover;

Answer 2

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: "[=10=]20";
  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;
}

Flexslider - 固定图片充电

Flexslider - Charging with fixed images

html

javascript

css

angularjs