Плагин 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>

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

<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)

• Общие
• Авто
• Пейджер
• Множественный показ
• Новостная лента
• Функции обратного вызова (Обратные вызовы)
• Публичные функции

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()
Переход к последнему слайду

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;                                   
        
    });
                          
    })                      

 

Источник