Orbit-Slider отображает все изображения, сложенные вертикально, когда браузер загружен в первый раз

Question

Использую Zurb Fondation Framework.
Каркас поставляется с orbit image slider.
Ползунок довольно приятный, но я не могу устранить одну проблему:

Когда страница (с ползунком) загружена в первый раз, все изображения в слайдере выглядят уложенными вертикально в течение 1-2 секунд. Затем ползунок загружается, и он выглядит нормально.

Просьба предложить идеи для правильного отображения слайдера при загрузке браузера в первый раз.

Slider код:

версия

<div class="row"> 
    <div class="large-12 columns"> 
     <div class="row"> 
     <div class="large-12 hide-for-small"> 

      <div class="orbit-container"><div id="featured" data-orbit="" class="orbit-slides-container" style="height: 417px;"> 
       <img src="http://placehold.it/1200x500&amp;text=Slide Image 1" alt="slide image" class="active" style="z-index: 4; margin-left: 0%;"> 
       <img src="http://placehold.it/1200x500&amp;text=Slide Image 2" alt="slide image" class="" style="z-index: 2; margin-left: 100%;"> 
       <img src="http://placehold.it/1200x500&amp;text=Slide Image 3" alt="slide image" class="" style="z-index: 2; margin-left: 100%;"> 
      </div><a href="#" class="orbit-prev"><span></span></a><a href="#" class="orbit-next"><span></span></a><div class="orbit-timer paused"><span></span><div class="orbit-progress" style="width: 0%;"></div></div><div class="orbit-slide-number"><span>1</span> of <span>3</span></div><div class="orbit-bullets-container"><ol class="orbit-bullets"><li data-orbit-slide="0" class="active"></li><li data-orbit-slide="1" class=""></li><li data-orbit-slide="2" class=""></li></ol></div></div> 

     </div> 
    </div> 

Zurb Foundation: 5,0

Спасибо,

Answer 1

С Orbit выполняется через Javascript, прежде чем он начинает в вас могут увидеть ваши изображения или содержание всех укладываться на друг друга. Чтобы этого избежать, вы можете использовать свойство Orbit: он добавляет класс .orbit после его выполнения, то есть вы можете настроить таргетинг на ваш div #, определенный специальными стилями, которые будут переопределены при добавлении класса.

Например, если мы хотим Orbit для загрузки простого светло-серого экрана с блесной, то CSS будет выглядеть следующим образом:

CSS:

#featured { background: url(spinner.gif) center center #f4f4f4 no-repeat; height: 300px; } 
#featured img { display: none; } 

#featured.orbit { background: none; } 
#featured.orbit img { display: block; } 

Мы прячемся изображения по умолчанию, и дать #featured блокировать фиксированную высоту и фон с помощью счетчика. После загрузки Орбиты изображения отображаются, и мы удаляем этот фон.

Взято из: http://foundation.zurb.com/docs/v/3.2.5/orbit.php

Answer 2

мысли, что я отправлю обновленный ответ на Фонд 6.

В настоящее время, пример кода в документации следующим образом:

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false"> 
<ul class="orbit-container"> 
<button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button> 
<button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button> 
<li class="is-active orbit-slide"> 
    <div> 
    <h3 class="text-center">1: You can also throw some text in here!</h3> 
    <p class="text-center">Achieve an animation-free Orbit with the data attribute data-use-m-u-i="false"</p> 
    <h3 class="text-center">This Orbit slider does not use animations.</h3> 
    </div> 
</li> 

Это кода до первого слайда.

Чтобы устранить этот эффект укладки, я просто спрятал все слайды, но первый.

.orbit-slide { 
    display: none; 
} 

.orbit-slide.is-active { 
    display: block; 
} 

Другие слайды отображаются, поскольку сценарий явно устанавливает их для отображения: block;

Answer 3

Для Foundation 6, я объединил ответы другого Патрика в один, и он отлично загружается.

.orbit-slide { 
    opacity: 0; 
    display:none; 
} 
.orbit-slide.is-active { 
    opacity: 1; 
    display: block; 
} 

Просто используя непрозрачность, загруженное пустое место под карусели, которое выглядело неуклюжим.

Редактировать: Поскольку у меня было только два слайда в моей карусели, он, похоже, работал, но это показывает последний слайд и замерзает карусель. Все еще ищет решение и jquery show/hide не так ли?