Flexslider - Loading with still images

Question

Flexslider - Loading with still images

Navigation

#1 by (1 votes)

1

I'm using Flexslider, but while the images load and the function is not executed, it plays one image below the other, generating a huge scrollbar and, after running and loading the images, it performs normally. / p>

The question is: is there a way to keep the images in the same position one below the other before they load? not to generate this huge scrollbar.

Follow the code below:

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>

Function:

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; 
    }
}

Follow images for better understanding:

Before: After:

javascript html angularjs css flexslider

asked by anonymous 12.08.2016 / 19:58

1 answer

Error in taxonomy.php Reuse of connections on Nodejs + Mongoose

score 1 · Accepted Answer

CSS to load still images:

.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: ".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: "%pre%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;
}
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;
}