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

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

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

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


  • Долбаный Alt!

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

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

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

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

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

[MODx] Генератор настроек MIGX

[MODx, MIGx] Документация на русском по MIGX

[MODX] Импорт и экспорт в MiniShop2. Реализация 1

[MODx] minishop2 tips

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

[MODx, miniShop2] Генерация YML для выгрузки в маркет

Как включить HTTPS (SSL) в MODX - Подробная инструкция

[MODx] Подсказки по API

[OpenCart] Вывести на главную все категории с картинками

[MODx, MIGX] Примеры использования

[MODx] Сайт на обслуживании (выключить сайт)

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

[PHP, JSON] Пример перевода с помощью Yandex Translate API

[MODx, Gallery] Галерея. Вывести обложки альбомов и фотографии

Расширение свойств товаров minishop2

[Opencart] Вернуть английский язык, если вы его удалили

[OpenCart] Вывести модуль напрямую через контроллер

[MODx, Quip] Более рабочий вариант.

[MODX, MIGX] Вывести getImageList только если он не пустой

[MODX, MIGX] Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

Красивое адаптивное меню под pdoMenu

[MODx] Создать источник файлов

[MODx] Вывод tv-параметров в формате [название TV] - [значение TV]

[PHP] Простое логирование

[MODX] Вывести список всех опций MiniShop2

Все записи