Открыть меню    

Плагин bxSlider

Подключаем плагин bxSlider

Метод 1. Простой

Просто расположите следующий код где-то в теге head вашей страницы.


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<script src="/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider();
  });
</script>
пример работы плагина bxSlider

Элемент, который передается плагину, должен быть сконструирован следующим образом:


<ul id="slider1">
  <li>Slide one content</li>
  <li>Slide two content</li>
  <li>Slide three content</li>
  <li>And so on...</li>
</ul>

или


<div id="slider1">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div>

Метод 2. Продвинутый

Скачайте архив с плагином

Распакуйте и положите файлы в ту же папку, где лежит файл с разметкой (html) плагина.

Включите нижеприведенный код в тег head вашей страницы.


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider();
  });
</script>

Опции и программный интерфейс приложения (API)

Общие

Mode
Вид перехода (перемещения) между каждым слайдом
default: 'horizontal'
options: 'horizontal', 'vertical', 'fade'

Speed
В миллисекундах, время перехода
default: 500

infiniteLoop
Отображать первый слайд после последнего
default: true
options: true, false

Controls
Отображать кнопки 'предыдущий' (prev) и 'следующий' (next)
default: true
options: true, false

prevText
Текст для кнопки 'предыдущий' (prev)
default: 'prev'
options: string

prevImage
Путь к файлу изображения, которое используется для кнопки 'предыдущий' (prev)
default: ''
options: string

prevSelector
Селектор jQuery – элемент, в который помещается кнопка 'предыдущий' (prev).
Наример: '#prev'
default: ''
options: valid jQuery selector

nextText
Текст для кнопки 'следующий' (next)
default: 'next'
options: string

nextImage
Путь к файлу изображения, которое используется для кнопки 'следующий' (next)
Например: 'images/next.jpg'
default: ''
options: string

nextSelector
Селектор jQuery – элемент, в который помещается кнопка следующий (next)
Наример: '#next'
default: null
options: valid jQuery selector

startingSlide
Показ начнется с заданного слайда. Замечание: слайды отсчитываются с нуля
default: 0
options: integer

randomStart
Если значение true показ начнется с произвольного слайда
default: false
options: true, false

hideControlOnEnd
Будучи true, спрячет кнопку 'next' при достижении последнего слайда, а 'prev' по достижении первого слалйда
default: false
options: true, false

Captions
Отображать заголовки (title) изображения (читает атрибут изображения 'title')
default: false
options: true, false

captionsSelector
Селектор jQuery – элемент, который содержит заголовки.
Например: '#captions'
default: null
options: valid jQuery selector

wrapperClass
Имя класса добавленное блоку-обертке слайдов
default: 'bx-wrapper'
options: string

Easing
Используется вместе с jquery.easing.1.3.js – увидеть все возможные можно здесь: gsgd.co.uk/sandbox/jquery/easing/

Авто

Auto
Переходы (смена) слайдов происходит автоматом
default: false
options: true, false

Pause
В миллисекундах, время между сменой слайдов
default: 3000
options: integer

autoControls
Отображать кнопки 'start' и 'stop' для авто показа
default: false
options: true, false

autoControlsSelector
Селектор jQuery – элемент, в котором содержаться элементы управления 'start' и 'stop'.
Например: '#auto-controls'
default: null
options: valid jQuery selector

startText
Текст, для кнопки 'start'
default: 'start'
options: string

startImage
Путь к изображению, которое помещается на место кнопки 'start'.
Например: 'images/start.jpg'
default: ''
options: string

stopText
Текст, для кнопки 'stop'
default: 'stop'
options: string

stopImage
Путь к изображению, которое помещается на место кнопки 'stop'.
Например: 'images/stop.jpg'
default: ''
options: string

autoDelay
В миллисекундах, количество времени перед стартом авто показа
default: 0
options: integer

autoDirection
Направление, в котором будет происходить авто показ слайдов
default: 'next'
options: 'next', 'prev'

autoHover
Будучи true, встанет на паузу при наведении курсора мышки на изображение
default: false
options: true, false

autoStart
Будучи false, для активации показа необходимо кликнуть по кнопке 'start'
default: true
options: true, false

Пейджер

Pager
Отображать числовой (цифровой) пейджер
default: false
options: true, false

pagerType
Будучи 'full', пейджер отображает 1,2,3… Будучи 'short' пейджер отображает 1 / 4
default: 'full'
options: 'full', 'short'

pagerSelector
Селектор jQuery – элемент, в котором содержится пейджер.
Например: '#pager'
default: null
options: valid jQuery selector

pagerLocation
Местоположение пейджера
default: 'bottom'
options: 'bottom', 'top'

pagerShortSeparator
Буквы, используемые между цифрами пейджера, для типа 'short'.
Например: значение 'of' соответствует 1 of 4
default: '/'
options: string

pagerActiveClass
Имя класса, прикрепленное к активной ссылке пейджера
default: 'pager-active'
options: string

Множественный показ

displaySlideQty
Количество слайдов отображаемых одновременно
default: 1
options: integer

moveSlideQty
Количество перемещающихся одновременно слайдов
default: 1
options: integer

Маятник или новостная лента

Ticker
Режим непрерывного движения (подобно новостной ленте)
default: false
options: true, false

tickerSpeed
Используйте значения от 1 до 5000, чтобы определить скорость движения ленты, чем ниже значение, тем выше скорость маятника
default: 5000
options: integer

tickerDirection
Направление, в котором будет проходить передвижение ленты
default: 'next'
options: 'next', 'prev'

tickerHover
Будучи true, лента приостановится при наведении на нее курсора мышки
default: false
options: true, false

Callbacks (Функции обратного вызова)

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

onBeforeSlide
Исполняет предоставленную функцию перед каждым переходом

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

onAfterSlide
Исполняет функцию после каждого перехода

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

onFirstSlide
Исполняет предоставленную функцию по достижении первого слайда

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

onLastSlide
Исполняет предоставленную функцию по достижении последнего слайда

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

onPrevSlide
Исполняет функцию, когда выполнен переход от кнопки 'previous' (предыдущий)

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

onNextSlide
Исполняет предоставленную функцию, когда выполнен переход от кнопки 'next' (следующий)

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

buildPager
Вызывает предоставленную функцию на каждый элемент пейджера

function(slideIndex, slideHtmlObject){
  // return output;
}

Публичные функции

Вызываются за пределами плагина. Доступны через объект

goToSlide(slideIndex)
Переход к заданному слайду. Слайды: ползунки отсчитываются с нуля

goToNextSlide()
Переход к слудующему слайду

goToPreviousSlide()
Переход к предыдущему слайду

goToFirstSlide()
Переход к первому слайду

goToLastSlide()
плагин bxslider Переход к последнему слайду

getCurrentSlide()
Возвращает текущий индекс слада

getSlideCount()
Возвращает число всех слайдов

stopShow()
Останавливает авто показ

startShow()
Начинает авто показ

stopTicker()
Останавливает показ ленты

startTicker()
Начинает показ

destroyShow()
Разрушает активное слайд-шоу

reloadShow()
Повторно инициализирует слайдшоу

jQuery код плагиина с функцией обратного вызова и публичной функцией.

Callback функция (возвратная) - передается функции в качестве параметра.
Возвратная функция выполняется последней, если в самой функции она размещена последней.

                                    
$(document).ready(function(){                  
                          
var slider = $('#scr').bxSlider({
        
mode: 'fade',              // тип перехода между слайдами
controls: false,           // отображение ручек - вперед,назад
infiniteLoop: true,        // показывать первый слайд за последним 
auto: true,                // сделать автоматический переход
pager: false,              // показ номера страницы
displaySlideQty: 1,        // кол-во слайдов отображаются за раз
moveSlideQty: 1,           // кол-во слайдов смещаются за раз
pause: 1600,               // время между переходами
speed: 150,                // длительность перехода слайда
        
// пример работы Callback функции (onBeforeSlide)
        
// onBeforeSlide - выполняет ф-ю перед переходом
onBeforeSlide: function(currentSlide, totalSlides, currentSlideHtmlObject){   
           
// код ф-и, переданные параметры можно не использовать
               
}                    
});  
   
// пример работы публичной ф-и (goToSlide) 
                                                             
    $('a').click(function(){                   
    
// по клике на 'a' - вызываем ф-ю из goToSlide  плагина bxslider   
// goToSlide(slideIndex) - переход к заданному слайду

    var thumbIndex = $('a').index(this); 
    
    slider.goToSlide(thumbIndex);                 
        
    return false;                                   
        
    });
                          
    })                      

 

Источник

Комментарии к статье

аватарка пользователя
2012-11-15
Ольга

Здравствуйте. Очень много полезного нашла на Вашем сайте. Но вот только не знаю в какую тему написать, чтобы было "по теме". Вопрос такой: как Вы сделали опрос в сайдбаре? И ещё: нехватает формы поиска по сайту (моё субъективное мнение). Спасибо

аватарка пользователя
2012-11-15
Костя

спасибо, опрос сделал по статье, которой уже нет (была на сайте http://phpjs.ru/ выдает 404)) , планирую написать статью на эту тему, но так как там очень все глобально (админка + (XMLHTTP, который я не до конца понимаю)), вероятно, будет это не сегодня и не завтра). если что обращайтесь через страничку "контакты" - самый верх сайта, постараюсь ответить на почту

аватарка пользователя
2013-02-11
Денис

Здравствуйте, хотел бы поинтересоваться по теме поста, вы не знаете предусмотрена функция работы слайдера в таком режиме...
Что есть типа слова "слайдер1, слайдер2, слайдер3" и оно гартается при их нажатии...смысл работы как у pager: true....но в pager идет номера слайдов, благодарю...

аватарка пользователя
2013-02-11
Денис

Да все в новой версии слайдера предусмотрен свой pager..
pagerCustom
Parent element to be used as the pager. Parent element must contain a <a data-slide-index="x"> element for each slide. See example here. Not for use with dynamic carousels.
default: null
options: jQuery selector

аватарка пользователя
2013-02-23
Влад

Здравствуйте.
Есть сайт: http://lexus-trike.net/ На нем стоит слайдер и он перестал листаться. Может кто помочь найти проблему?

аватарка пользователя
2013-03-12
Юлия

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

аватарка пользователя
2013-03-12
dnzl

Юлия, если вам нужно, то безусловно можно

аватарка пользователя
2013-06-03
Алексей

Как сделать, что-бы слайдер продолжал автоматическую смену слайдов после нажатия на номере слайда или после нажатия, предыдущий(следующий)?

аватарка пользователя
2013-06-03
dnzl

'auto':true

аватарка пользователя
2013-07-04
zhogov

Как предусмотреть изменение экрана, ну что бы элементы слайдера масштабировались под экран? Слайдер занимает все место от края до края. Подскажите, плиз!

аватарка пользователя
2013-10-03
Alexey

Добрый день!Использую этот слайдер в качестве меню сайта.Как сделать так чтобы он при выборе пункта меню не перескакивал на начало и выделял другим цветом активное меню?
P.S.Буду весьма признателен за помощь

аватарка пользователя
2014-01-11
Сергей

Стоит auto: true, но после нажатия стрелки, слайд-шоу пропадает, как сделать так что бы после нажатия на стрелку слайд-шоу продолжалось дальше?

аватарка пользователя
2014-01-11
dnzl

давно не разбирался с этим слайдером, автоматический смена слайдов: auto: true, если что-то не выходит смотрите консоль js или загляните в офф. документацию по слайдера...насколько я помню, версия слайдера кардинально поменялась уже

аватарка пользователя
2014-01-19
Ренат

Тоже столкнулся с проблемой, в режиме "auto:true" после нажатия стрелки вперед или назад, слайд-шоу останавливалось.
Помогло следующее:
Что бы после нажатия слайд-шоу продолжалось, надо в файле "jquery.bxslider.js" в двух функциях "clickNextBind" и "clickPrevBind" удалить "el.stopAuto()".

аватарка пользователя
2014-05-30
Дмитрий

Создатели статьи, пожалуйста, обратите внимание, что у Вас функции callback'ов названы не правильно. Допустим не onBeforeSlide, а onSlideBefore. Проверьте и исправьте, пожалуйста, названия функций и передаваемые в эти функции значения. Порядок указан не верно. Спасибо

аватарка пользователя
2016-03-21
Сергей

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

аватарка пользователя
2016-03-21
dnzl

Сергей, используйте slick

Добавить комментарий