bxSlider — установка, настройки, примеры

Опубликовано: 23 марта 2016 Обновлено: 18 января 2021 69 комментариев

Плагин bxSlider — отзывчивый jQuery-слайдер для контента. Наличие большого количества настроек позволяет адаптировать слайдер под конкретные нужды вашего проекта.

Преимущества:

  • адаптируется под любое устройство;
  • слайды сменяются как по горизонтали, так и по вертикали, есть режим выцветания (fade);
  • слайды могут содержать изображения, видео или любое html-содержимое;
  • работает на сенсорных экранах;
  • для смены слайдов используются css-переходы, что даёт аппаратное ускорение;
  • полный API обратного вызова и открытые методы (before, after, first, last, next, prev);
  • хорошая поддержка браузерами: Firefox, Chrome, Safari, iOS, Android, IE7+.

Перейти на страницу с примерами

1. Как установить bxslider

Шаг 1. Добавьте ссылки на необходимые файлы

Скачайте архив с файлами с официального сайта. Создайте на сервере папку с названием плагина, например, bxslider. Закачайте в неё файлы jquery.bxslider.min.js и jquery.bxslider.css. Для работы плагина добавьте в раздел head ссылки на файлы в следующем порядке:

1) ссылка на файл со стилями jquery.bxslider.css. Таблицу стилей подключайте в том случае, если не собираетесь вносить изменения во внешний вид слайдера;
2) ссылка на библиотеку jQuery;
3) ссылка на файл со скриптом jquery.bxslider.min.js.

<link href="путь_к_файлу_на_вашем_сервере/jquery.bxslider.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="путь_к_файлу_на_вашем_сервере/jquery.bxslider.min.js"></script>

Вместо строчки путь_к_файлу_на_вашем_сервере укажите реальный путь к файлу, хранящемуся на вашем сервере.

Если вы будете добавлять в слайдер видео или использовать функции перехода, то вам понадобятся ещё два файла из папки plugins скачанного архива: jquery.easing.1.3.js и jquery.fitvids.js.

Шаг 2. Создайте html-разметку

Создайте маркированный список с классом bxslider. Каждый элемент списка — отдельный слайд. В качестве содержимого может быть картинка, видео или другой html-контент.

<ul class="bxslider">
  <li><img src="/images/pic1.jpg"></li>
  <li><img src="/images/pic2.jpg"></li>
  <li><img src="/images/pic3.jpg"></li>
  <li><img src="/images/pic4.jpg"></li>
</ul>

Шаг 3. Вызовите bxslider

Вызовите функцию bxslider() для списка <ul class="bxslider"> с помощью jQuery.

<script>jQuery(document).ready(function(){
  jQuery('.bxslider').bxSlider();
});</script>

2. Настройки bxslider

Слайдер — это некий объект, который имеет свойства и их возможные значения. Некоторые свойства уже активизированы при инициализации (вызове) слайдера. Поэтому пользовательская настройка слайдера заключается в отмене тех или иных свойств или в добавлении новых.

Например, captions: false означает, что подписи к слайдам отключены по умолчанию. Чтобы добавить вывод подписей к слайдам, нужно задать captions: true.

2.1. Общие настройки

Для каждого свойства первое значение — значение по умолчанию, во второй строчке перечислены все возможные варианты для этого свойства.

mode — тип перехода между слайдами.

mode: 'horizontal' 
варианты: 'horizontal', 'vertical', 'fade'

speed — скорость смены слайдов

speed: 500
варианты: любое целое число

slideMargin — отступ между каждым слайдом.

slideMargin: 0
варианты: любое целое число

startSlide — индекс начального слайда (начинается с нуля).

startSlide: 0
варианты: любое целое число

randomStart — запуск слайдера с произвольного слайда.

randomStart: false
варианты: true или false

slideSelector — добавляет элемент-контейнер, который будет использоваться как слайдер.

slideSelector: ''
варианты: селектор jQuery

infiniteLoop — если задано true, при нажатии кнопки Next на последнем слайде будет осуществлён переход к первому слайду и наоборот.

infiniteLoop: true
варианты: true или false

hideControlOnEnd — если задано true, кнопка Next будет скрыта на последнем слайде и наоборот.

hideControlOnEnd: false
варианты: true или false

easing — тип перехода между слайдами. Если используются css-переходы, включаются значения transition-timing-function. Если css-переходы не используется, можно подключить плагин easing.

easing: null
варианты: 
если используется CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. 
Если используется плагин easing: 'swing', 'linear' и т.д.

captions — добавляет подписи к картинкам. Название берётся из значения атрибута title.

captions: false
варианты: true или false

ticker — бегущая строка из слайдов.

ticker: false
варианты: true или false

tickerHover — останавливает движение слайдов при наведении мышью. Не работает, если используются css-переходы.

tickerHover: false
варианты: true или false

adaptiveHeight — динамическая регулировка высоты слайдера в соответствии с высотой каждого слайда.

adaptiveHeight: false
варианты: true или false

adaptiveHeightSpeed — длительность перехода в миллисекундах при динамической регулировке высоты слайда, работает только для adaptiveHeight: true.

adaptiveHeight: 500
варианты: любое целое число

video — если какой-нибудь слайд содержит видео, установите video: true. Также подключите plugins/jquery.fitvids.js.

video: false
варианты: true или false

responsive — включает или отключает адаптивность слайдера.

responsive: true
варианты: true или false

useCSS — если задано true, для вертикальной и горизонтальной анимации слайдов будут использоваться css-переходы. В противном случае подключите плагин easing.

useCSS: true
варианты: true или false

preloadImages — если задано preloadImages:'all', все картинки будут загружены перед началом показа. В противном случае будет загружен только начальный слайд.

preloadImages: visible
варианты: 'all', 'visible'

touchEnabled — включает и отключает перелистывание слайдов пальцем для сенсорных экранов.

touchEnabled: true
варианты: true или false

swipeThreshold — количество пикселей, превышение которого выполнит переход слайдов. 

swipeThreshold: 50
варианты: любое целое число

oneToOneTouch — если задано true, слайды, не использующие выцветание, будут перемещаться следом за пальцем.

oneToOneTouch: true
варианты: true или false

preventDefaultSwipeX — если задано true, сенсорный экран не будет двигаться вдоль оси X при листании слайдов пальцем.

preventDefaultSwipeX: true
варианты: true или false

preventDefaultSwipeY — если задано true, сенсорный экран не будет двигаться вдоль оси Y при листании слайдов пальцем.

preventDefaultSwipeY: false
варианты: true или false

2.2. Счётчик количества слайдов

pager — если задано true, будет выводиться индикатор количества слайдов. 

pager: true
варианты: true или false

pagerType — если задано pagerType: 'full', счётчик будет содержать цифровые ссылки для каждого слайда, если задано 'short', то будет запись вида 1/5.

pagerType: 'full'
варианты: 'full', 'short'

pagerShortSeparator — тип разделителя цифр для pagerType: 'short'.

pagerShortSeparator: ' / '
варианты: любой символ

pagerSelector — регистрирует элемент-контейнер с указанным классом или идентификатором, который содержит счётчик.

pagerSelector: ''
варианты: jQuery селектор

pagerCustom — родительский элемент, используемый в качестве счётчика. Должен содержать <a data-slide-index="x"> для каждого слайда. Не используется для динамической карусели.

pagerCustom: null
варианты: jQuery селектор

buildPager — если установлен, функция вызывается на каждый слайд, возвращаемое значение используется в качестве мини-эскиза в счётчике.

buildPager: null
варианты: function(slideIndex)

2.3. Элементы управления

controls — если задано true, будут показаны элементы управления Next / Prev.

controls: true
варианты: true или false

nextText — текст, который используется для кнопки Next.

nextText: 'Next'
варианты: строка символов

prevText — текст, который используется для кнопки Prev.

prevText: 'Prev'
варианты: строка символов

nextSelector — элемент-контейнер для кнопки Next.

nextSelector: null
варианты: jQuery селектор

prevSelector — элемент-контейнер для кнопки Prev.

prevSelector: null
варианты: jQuery селектор

autoControls — если задано true, будут добавлены кнопки Start / Stop.

autoControls: false
варианты: true или false

startText — текст, который будет использоваться для кнопки Start.

startText: 'Start'
варианты: строка символов

stopText — текст, который будет использоваться для кнопки Stop.

stopText: 'Stop'
варианты: строка символов

autoControlsCombine — когда слайдшоу запущено, будет отображаться только кнопка Stop и наоборот.

autoControlsCombine: false
варианты: true или false

autoControlsSelector — элемент-контейнер для кнопок Start / Stop.

autoControlsSelector: null
варианты: jQuery селектор

2.4. Автоматический показ слайдов

auto — настраивает автоматическую смену слайдов.

auto: false
варианты: true или false

pause — количество времени в миллисекундах между каждым переходом.

pause: 4000
варианты: любое целое число

autoStart — автоматическая смена слайдов начинается при загрузке слайда. Если указано false, показ начнётся при нажатии на кнопку Start.

autoStart: true
варианты: true или false

autoDirection — направление смены слайдов (с начала или с конца).

autoDirection: 'next'
варианты: 'next', 'prev'

autoHover — автоматический показ слайдов будет остановлен при наведении мышью на слайдер.

autoHover: false
варианты: true или false

autoDelay — время задержки с миллисекундах перед запуском показа слайдов .

autoDelay: 0
варианты: любое целое число

2.5. Карусель

minSlides — минимальное количество слайдов для показа. Слайды будут уменьшены (обрезаны), если карусель станет меньше первоначального размера. 

minSlides: 1
варианты: любое целое число

maxSlides — максимальное количество слайдов. Слайды будут увеличены в размере, если карусель станет больше оригинального размера.

maxSlides: 1
варианты: любое целое число

moveSlides — количество слайдов, перемещающихся вместе при смене слайда. Количество должно быть больше или равно minSlides и меньше или равно maxSlides. По умолчанию используется количество полностью видимых слайдов.

moveSlides: 0
варианты: любое целое число

slideWidth — ширина каждого слайда, обязательна для карусели.

slideWidth: 0
варианты: любое целое число

2.6. Функции обратного вызова

onSliderLoad — выполняет сразу после того, как слайдер полностью загружен.

onSliderLoad: function(){}
варианты: function(индекс текущего слайда){ // ваш код здесь }

onSlideBefore — выполняется непосредственно перед каждой сменой слайда.

onSlideBefore: function(){}
варианты: function($slideElement, oldIndex, newIndex){ // ваш код здесь }
принимаемые аргументы:
  $slideElement: jQuery элемент целевого элемента
  oldIndex: индекс элемента предыдущего слайда (до перехода)
  newIndex: индекс конечного элемента (после перехода)

onSlideAfter — функция выполняется сразу же после каждого перехода между слайдами. Аргументом функции является текущий элемент слайда (когда переход завершается).

onSlideAfter: function(){}
варианты: function($slideElement, oldIndex, newIndex){ // ваш код здесь }
arguments:
  $slideElement: jQuery элемент целевого элемента 
  oldIndex: индекс элемента предыдущего слайда (до перехода)
  newIndex: индекс конечного элемента (после перехода)

onSlideNext — функция выполняется непосредственно перед каждым переходом по кнопке Next. В качестве аргумента функция принимает следующий элемент перехода.

onSlideNext: function(){}
options: function($slideElement, oldIndex, newIndex){ // ваш код здесь }
arguments:
  $slideElement: jQuery элемент целевого элемента
  oldIndex: индекс элемента предыдущего слайда (до перехода)
  newIndex: индекс конечного элемента (после перехода)

onSlidePrev — функция выполняется непосредственно перед каждым переходом по кнопке Prev. В качестве аргумента функция принимает предыдущий элемент перехода. 

onSlidePrev: function(){}
options: function($slideElement, oldIndex, newIndex){ // ваш код здесь }
arguments:
  $slideElement: jQuery элемент целевого элемента
  oldIndex: индекс элемента предыдущего слайда (до перехода)
  newIndex: индекс конечного элемента (после перехода)

2.7. Публичные методы

goToSlide — выполняет переход между слайдами к слайду с заданным индексом (отсчёт начитается с нуля).

slider = $('.bxslider').bxSlider();
slider.goToSlide(3);

goToNextSlide — выполняет переход к следующему слайду.

slider = $('.bxslider').bxSlider();
slider.goToNextSlide();

goToPrevSlide — переход к предыдущему слайду.

slider = $('.bxslider').bxSlider();
slider.goToPrevSlide();

startAuto — запускает автоматический показ слайдов. Используйте аргумент false, чтобы предотвратить поведение кнопки от обновления.

slider = $('.bxslider').bxSlider();
slider.startAuto();

stopAuto — останавливает автоматический показ слайдов. Используйте аргумент false, чтобы предотвратить поведение кнопки от обновления.

slider = $('.bxslider').bxSlider();
slider.stopAuto();

getCurrentSlide — возвращает текущий активный слайд.

slider = $('.bxslider').bxSlider();
var current = slider.getCurrentSlide();

getSlideCount — возвращает общее количество слайдов в слайдере.

slider = $('.bxslider').bxSlider();
var slideQty = slider.getSlideCount();

reloadSlider — обновляет слайдер. Полезно в случае добавления слайдов на лету.

slider = $('.bxslider').bxSlider();
slider.reloadSlider();

destroySlider — разрушает активный слайдер, возвращая все элементы в первоначальное состояние.

slider = $('.bxslider').bxSlider();
slider.destroySlider();

3. Примеры настройки и оформления слайдера

Таблица стилей из архива плагина задаёт однообразный и скромный вид слайдера. Воспользуйтесь вариантами ниже или поэкспериментируйте самостоятельно, чтобы украсить ваш слайдер. Для создания адаптивного слайдера необходимо поместить его разметку в блок с относительной шириной, заданной в %. Чтобы отключить текст кнопок управления Next и Prev, задайте в настройках плагина nextText: '', prevText: ''.

3.1. Пользовательские элементы управления

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ваш_сайт/bxSlider/jquery.bxslider.js"></script>
<script>jQuery(document).ready(function(){
  jQuery('.bxslider').bxSlider({
  pager: false, // отключаем индикатор количества слайдов
  nextText: '', // отключаем текст кнопки Next
  prevText: '' // отключаем текст кнопки Prev
  });
});</script>

<ul class="bxslider">
  <li><img src="http://ваш_сайт/flower-example-10.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-9.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-3.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-5.jpg" /></li>
</ul>
* {box-sizing: border-box;}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bx-wrapper {
  width: 440px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
.bx-prev, .bx-next {
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  z-index: 3;
  bottom: 20px;
  right: 70px;
  border-radius: 3px;
  background: white;
  text-decoration: none;
  outline: none;
  transition: .2s ease-in-out;
}
.bx-next {right: 20px;}
.bx-prev:before, .bx-next:before {
  font-size: 16px;
  color: #9a9a9a;
  font-family: "FontAwesome";
}
.bx-prev:before {content: "\f104";}
.bx-next:before {content: "\f105";}

3.2. Галерея изображений с подписями

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<link href='https://fonts.googleapis.com/css?family=Comfortaa&subset=cyrillic-ext' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ваш_сайт/bxSlider/plugins/jquery.easing.1.3.js"></script>
<script src="http://ваш_сайт/bxSlider/jquery.bxslider.js"></script>
<script>jQuery(document).ready(function(){
jQuery('.bxslider').bxSlider({
   pager: false,
   captions: true,
   nextText: '',
   prevText: '',
   useCSS: false,
   easing: 'jswing',
   speed: 500
   });
});</script>

<ul class="bxslider">
  <li><img src="http://ваш_сайт/flower-example-10.jpg" title="Аленький цветочек"/></li>
  <li><img src="http://ваш_сайт/flower-example-9.jpg" title="Утренняя роса" /></li>
  <li><img src="http://ваш_сайт/flower-example-3.jpg" title="Букет цветов" /></li>
  <li><img src="http://ваш_сайт/flower-example-5.jpg" title="Ветка вишни" /></li>
</ul>
* {box-sizing: border-box;}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bx-wrapper {
  width: 500px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
.bx-prev, .bx-next {
  text-decoration: none;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  border: 1px solid rgba(255,255,255,0.7);
  color: rgba(255,255,255,0.7);
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  text-align: center;
  border-radius: 50%;
  transition: all ease .3s;
  z-index: 10;
  cursor: pointer;
}
.bx-prev:hover, .bx-next:hover, .bx-prev:active, .bx-next:active {
  background: #6BA7BD;
  border-color: #6BA7BD;
}
.bx-prev {left: 20px;}
.bx-next {right: 20px;}
.bx-prev:before, .bx-next:before {font-family: "FontAwesome";}
.bx-prev:before {content: "\f104";}
.bx-next:before {content: "\f105";}
.bx-caption {
  position: absolute;
  width: 50%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: .3s ease-in-out;
  padding: 2em;
  background: rgba(255,255,255,.9);
  z-index: 2;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Comfortaa', cursive;
}

3.3. Появляющиеся кнопки управления

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ваш_сайт/bxSlider/plugins/jquery.easing.1.3.js"></script>
<script src="http://ваш_сайт/bxSlider/jquery.bxslider.js"></script>
<script>jQuery(document).ready(function(){
jQuery('.bxslider').bxSlider({
   nextText:'',
   prevText:'',
   useCSS: false,
   easing: 'jswing',
   speed: 500
   });
});</script>

<ul class="bxslider">
  <li><img src="http://ваш_сайт/flower-example-10.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-9.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-3.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-5.jpg" /></li>
</ul>
* {box-sizing: border-box;}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bx-wrapper {
  width: 500px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
.bx-pager {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
.bx-pager-item {display: inline-block;}
.bx-pager-link {
  text-indent: -9999px;
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  outline: 0;
  border: 2px solid white;
  border-radius: 50%;
}
a.active {background: white;}
.bx-prev, .bx-next {
  text-decoration: none;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  background: white;
  color: #666;
  width: 50px;
  height: 50px;
  opacity: 0;
  text-align: center;
  transition: .4s linear;
  z-index: 10;
  cursor: pointer;
}
.bx-wrapper:hover .bx-prev, .bx-wrapper:hover .bx-next, .bx-wrapper:hover .bx-prev:active, .bx-wrapper:hover .bx-next:active {opacity: 1;}
.bx-prev {left: 20px;}
.bx-next {right: 20px;}
.bx-prev:before, .bx-next:before {
  font-family: "FontAwesome";
  font-size: 30px;
  line-height: 50px;
}
.bx-prev:before {content: "\f104";}
.bx-next:before {content: "\f105";}

3.4. Галерея изображений с миниатюрами

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ваш_сайт/bxSlider/jquery.bxslider.js"></script>
<script>jQuery(document).ready(function(){
jQuery('.bxslider').bxSlider({
   nextText: '',
   prevText: '',
   pagerCustom: '#bx-pager'
});
});</script>

<div class="slider">
<ul class="bxslider">
  <li><img src="http://ваш_сайт/flower-example-10.jpg"/></li>
  <li><img src="http://ваш_сайт/flower-example-9.jpg"/></li>
  <li><img src="http://ваш_сайт/flower-example-3.jpg"/></li>
  <li><img src="http://ваш_сайт/flower-example-5.jpg"/></li>
 </ul>
<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="http://ваш_сайт/flower-example-10.jpg" /></a>
  <a data-slide-index="1" href=""><img src="http://ваш_сайт/flower-example-9.jpg" /></a>
  <a data-slide-index="2" href=""><img src="http://ваш_сайт/flower-example-3.jpg" /></a>
  <a data-slide-index="3" href=""><img src="http://ваш_сайт/flower-example-5.jpg" /></a>
</div>
</div>
* {box-sizing: border-box;}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bx-wrapper {
  width: 500px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
#bx-pager {
  margin-top: 20px;
  text-align: center;
}
#bx-pager a {margin: 0 3px;}
#bx-pager a img {
  padding: 3px;
  border: 1px solid #ccc;
  width: 80px;
  transition: .4s ease-in-out;
}
#bx-pager a.active img {border: 1px solid #D4104E;}
.bx-prev, .bx-next {
  text-decoration: none;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  background: white;
  color: #666;
  width: 30px;
  height: 80px;
  text-align: center;
  transition: .4s linear;
  z-index: 10;
  cursor: pointer;
}
.bx-prev {
  left: 0;
  border-radius: 0 5px 5px 0;
}
.bx-next {
  right: 0;
  border-radius: 5px 0 0 5px;
}
.bx-prev:before, .bx-next:before {
  font-family: "FontAwesome";
  font-size: 30px;
  line-height: 80px;
}
.bx-next:before {content: "\f105";}
.bx-prev:before {content: "\f104";}

Поделиться: