Bxslider отображение картинок после полной загрузки слайдера

Как сделать так, чтобы не картинки слайдера были скрыты и не показывались до тех пор, пока не загрузится скрипт, и не активируется слайдер? В данной заметке речь идет о Bxslider, но думаю, что это в той же степени актуально для любого другого javascript-слайдера. Нужно лишь найти в документации функцию-колбэк, которая срабатывает после активации слайдера. В случае с Bxslider это onSliderLoad.

Наилучший вариант — первую картинку сделать видимой, а остальные скрыть. Если ваш бэк-энд (или CSS) позволяет это сделать, то круто! Это наилучший вариант, потому что сразу же выделяется место под слайдер, и верстка совсем не прыгает после полной загрузки и активации слайдера.

Тогда при вызове пишем вот так:


  • Долбаный Alt!

Если нет возможности оставить первый элемент видимым, то можно добавить класс hidden и к первому элементу, но тогда нужно будет прописать fix в CSS - чтобы первый элемент оставался видимым. Это реализуется примерно так:

/* Универсальный класс по всему сайту */
.hidden{
    visibility: hidden;
}
/* Fix для первого элемента слайдера */
.gentle_slider_item.hidden:first-child{
    visibility: visible;
}

Есть еще кое-какие простые трюки костыли чтобы избежать подергивания верстки. Можно задать высоту для элемента-обертки слайдера. Эм, еще какие-то есть наверняка, но об этом пишите в комментариях:)

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором

Похожие статьи

jQuery.Maskedinput js - документация на русском с примерами

Маска для ввода телефона +7(___)___-__-__

Отключить автозаполнение input

Настройка Webpack - несколько точек входа и разделение на чанки

Универсальная форма обратной связи — feedBackForm

Слайдер Slick slider в контенте ресурса

Как сделать переменную не реактивной в Vue

Bxslider отображение картинок после полной загрузки слайдера

Как обработать POST данные в PHP

Примеры использования Vuex

Выполнить код после асинхронного запроса axios во Vue

Как вызвать метод из другого компонента Vue

Заготовки JavaScript

Рекурсивно вложенный компонент Vue

Связать значения инпутов через jQuery (биндинг)

Настроить Axios чтобы принимал только JSON

Использование async/await в JavaScript с Vue.js

Js-beautify - библиотека для форматирования HTML, CSS, JS

Использование Promise.all с примерами на VueJs

Создание цикла асинхронных вызовов во Vue.js

Манипуляция с HTML во Vue.js и cash-dom

Наш сайт использует куки, нажмите «ОК» если вы не против
OK