Проблема загрузки слайдера Nivo

Question

У меня странная проблема с загрузкой Nivo Slider, левая часть изображения показывает, как выглядит мой слайдер сразу после входа на сайт (а это НЕПРАВИЛЬНО), а справа - через некоторое время.

Вопрос в том, почему мои изображения загружаются до того, как они содержат div (с загрузочной анимацией), и отображаются один под другим? Конечно, основной контейнер имеет относительную позицию, и каждый контейнер img абсолютно расположен сверху: 0 и слева: 0. Есть идеи? Пытался поставить это на jsfiddle, но я считаю, что Nivo не поддерживается.

Answer 1

Просто скрыть переполнение

.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-box img { display:block; }

Answer 2

У меня была та же проблема, и я смог решить ее с помощью следующих стилей:

.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}

Answer 3

Как сделать так, чтобы мои изображения не складывались на странице перед загрузкой слайдера?

Из-за того, что вам приходится использовать функцию $ (window) .load (), возникает задержкаперед плагином применить определенные стили к элементам.Вы можете помочь в этом, вручную применив вышеуказанные стили CSS, чтобы остановить размещение изображений на странице до загрузки плагина.

#slider {
    //See the "style-pack" for image
    background:url(images/loading.gif) no-repeat 50% 50%; 
}
#slider img {
    display:none;
}

http://nivo.dev7studios.com/support/

В следующий раз яначать с FAQ; / Извините.Я надеюсь, что это поможет кому-то в будущем ...

Answer 4

Мой опыт использования Nivo-Slider заключается в том, что когда это происходит, файл nivo-slider.css неправильно связывается с HTML-страницей.Дважды проверьте ваши ссылки на таблицу стилей.

Answer 5

Вы можете попробовать добавить 'overflow: hidden' в css для элемента контейнера.