bxSlider слайд шоу (слайдер) — применение, настройки, примеры

Для некоторых сайтов приходится применять слайдер для перелистывания банеров (изображений), приходится добавлять определенную настройку для слайдера что бы работал так как нужно. Для того что бы настроить ниже сможете посмотреть возможные свойства для слайдера.

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

• 1. Баг найденный в IE. Изображение увеличивается или сдвигается в не области закрытого участка блока (overflow: hidden - он не скрыт), для этого решения применяй стиль position: relative; и баннер не будет виден за области участка в применении overflow:hidden
• 2. Если контент дергается в начальной загрузки страницы, возможно слайдер еще не загрузился и до этого момента вывелись изображения столбиком вниз делая контент страницы больше. Для решения этого случая постарайтесь сверстайть блок так что бы до загрузки слайда был такойже как после загрузки слайдера
• 3. Бывают баги с переносом блока с одного места на другое, и при переносе слайдер уже плохо работает (точнее не работает) для этого снизу описал строчку с применением $('#myslide').bxSlider().reloadSlider({...}), применяй после того как будешь переносить а старый слайдер удаляй что бы не нагружать

Для создания первого слайда:

$('#myslide').bxSlider({ /*значения*/ });

Для создания второго слайда или N колличество:

$('#myslide').bxSlider().reloadSlider({ /*значения*/ });

- Тип перехода между слайдами:

{
    mode: 'horizontal'
}

- Продолжительность перехода между слайдами:

{
    speed: 500
}

- margin между каждого слайда:

{
    slideMargin : 0
}

- Начиная индекс слайда (с нуля):

{
    startSlide : 0
}

- Начала слайда в случайном порядке:

{
    randomStart : false
}

- Элемент для использования в качестве слайдера (напр. '.slide'). Примечание: по умолчанию, bxSlider будет использовать все непосредственные дочерние элемента слайдера:

{
    slideSelector : ''
}

- Если это true, то нажав на кнопку "Далее" на последнем слайде перейдет к первому слайду и наоборот:

{
    infiniteLoop : true
}

- Если это true, кнопка "Next" управления будет скрыта по последнему слайду и наоборот Примечание: используется только при infiniteLoop false:

{
    hideControlOnEnd : false
}

- Подписка получена из атрибута заголовка изображения title:

{
    captions : false
}

- Используйте слайд в режиме таймера (по аналогии бегущая строка) таймер выставляйте в speed:

{
    ticker : false
}

- Код будет останавливаться, когда указатель мыши находится на слайдере. Примечание: эта функция не работает, если анимация сделана с помощью CSS!:

{
    tickerHover : false
}

- Динамически регулирует высоту слайда на основе высоты картинки:

{
    adaptiveHeight : false
}

- Высота слайда переходит автоматическую. Примечание: используется только если adaptiveHeightSpeed: true:

{
    adaptiveHeightSpeed : 500
}

- Если какие-либо слайды содержат видео, установите этот параметр true. Кроме того, включают в себя плагины / jquery.fitvids.js Смотрите http://fitvidsjs.com/ для получения дополнительной информации:

{
    video : false
}

- Включить или отключить автоматическое изменение размеров слайда. Полезно, если вам нужно использовать фиксированную ширину слайда.:

{
    responsive : true
}

- Если это true, слайдер позволит сенсорные переходы по слайдам:

{
    touchEnabled : true
}

- Количество px нужно пройти мишкой для того, чтобы выполнить переход между слайдами Примечание: используется только если touchEnabled: true:

{
    swipeThreshold : 50
}

Pager

- Будет добавлен пейджер:

{
    pager : true
}

- Если "full", ссылка на пейджер будет генерироваться для каждого слайда. Если "short", будут использоваться пейджер (напр. 1/5):

{
    pagerType : 'full'
}

- Если pagerType: "short", пейджер будет использовать это значение в качестве разделительного символа:

{
    pagerShortSeparator : ' / '
}

- Элемент используется для заполнения пейджер. По умолчанию, пейджер добавляется к bx-viewport:

{
    pagerSelector : ''
}

Controls

- Если это true, будут добавлены "NEXT" / "PREV" управления:

{
    controls : true
}

- Текст будет использоваться для контроля "Next":

{
    nextText : 'Next'
}

- Текст будет использоваться для контроля "Prev":

{
    prevText : 'Prev'
}

Auto

- Слайды автоматически переходит:

{
    auto : false
}

- Количество времени (в мс) между автоматическим переходом:

{
    pause : 4000
}

- Если это true, будут добавлены "Пуск" / "Стоп" управления:

{
    autoControls : false
}

- Текст будет использоваться для контроля "start":

{
    startText : 'Start'
}

- Текст будет использоваться для контроля "stop":

{
    stopText : 'Stop'
}

- Когда слайд-шоу только играть отображается управления "Стоп" и наоборот:

{
    autoControlsCombine : false
}

- Направление авто слайд-шоу переходов:

{
    autoDirection : 'next'
}

- Слайдшоу будет останавливаться, когда указатель мыши находится на слайдере:

{
    autoHover : false
}

- Время (в мс) до старта слайдшоу:

{
    autoDelay : 0
}

Carousel

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

{
    minSlides : 1
}

- Максимальное количество слайдов, чтобы быть показано на рисунке. Слайды будут размером, если карусель становится больше, чем исходный размер:

{
    maxSlides : 1
}

- Количество слайдов, чтобы перейти на переходный период. Это значение должно быть> = minSlides, и <= maxSlides. Если он равен нулю (по умолчанию), то будет использоваться число полностью видимых слайдов:

{
    moveSlides : 0
}

- Ширина каждого слайда. Этот параметр является обязательным для всех горизонтальных каруселей!:

{
    slideWidth : false
}