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

Плагин 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){ // your code here }
arguments:
  $slideElement: jQuery элемент целевого элемента
  oldIndex: индекс элемента предыдущего слайда (до перехода)
  newIndex: индекс конечного элемента (после перехода)

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

onSlidePrev: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
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";}
  • Создание Сайтов

    По мне, это довольно сложно, во все, это, вникать. Куда проще воспользоваться плагином для wp. Там в коде не надо рыться, подключать библиотеки не надо. Но кто делает статичные сайты, для создания слайдеров различного назначения и конфигураций, вполне подойдет. Например в отзывы можно заверстать, в сертификаты, портфолио и тд.

    • На самом деле несложно, у каждого слайдера, в том числе интегрированного в Вордпресс, есть настройки, и меняя значения свойств по умолчанию и внешний вид элементов, можно создавать интересные варианты для своего сайта. В плагине bxSlider integration for WordPress те же самые свойства.

      • Создание Сайтов

        Про такой не знал. Премного благодарен, надо будет попробовать его.

  • Виктор Лошанев

    Добрый день! подскажите пожалуйста как сделать так чтобы слайдер был всегда с отступом от низа экрана на разных мониторах. Картинка для примера

    • Добрый день! В общем виде разметка слайдера следующая:
      <div class=»slider»><!—контейнер для слайдера—>
      <div class=»bx-wrapper»>…</div><!—слайды—>
      <div id=»bx-pager»>…</div><!—миниатюры слайдов—>
      </div>
      Чтобы внизу слайдера всегда был отступ (например, 30 пикселей), добавьте его контейнеру для слайдера:
      .slider {margin-bottom: 30px;}

      • Виктор Лошанев

        ммм я имел ввиду чтобы он был как бы на весь экран на разных мониторах, только чтобы шел не до самого низа экрана

        • Понятно, но для таких целей этот слайдер не подходит. Вам нужен Fullscreen slider. В ближайшее время подберу оптимальный вариант и напишу урок.

  • Андрей

    Добрый день) а как убрать элементы управления, которые отображены как точки внизу слайдера?

    • Добрый день. Отключить блок с точками можно с помощью свойства pager: false. Я добавила в пример 1 и 2, посмотрите, пожалуйста.

  • Евгений

    Доброго времени суток!
    На сайте реализована карусель bxslider. Показывается до 6 блоков. Как сделать переход на следующий и/или предыдущий блоки при клике по одному из них? То есть не с помощью кнопок навигации, а непосредственно на нужный слайд.

    • Добрый день! Для этого слайдера доступны три стандартных способа смены слайдов: стрелки «вперед-назад», пагинация (цифр или точки) и миниатюры изображений.
      В вашем случае нужно воспользоваться публичным методом .goToNextSlide(). Пример здесь http://codepen.io/html5book/pen/pEBmkG.
      pager: false и controls: false убирают пагинацию и навигацию слайдера (если нужно).

  • Evgeniy

    добрый день, подскажите плиз как решить 2 вопроса,

    1) на одном макете PSD для сайта есть 3 слайдера и у каждого свой дизайн, где то пагинация в виде круглых точек, где то прямоугольники и т.д., но стили у bxslider общие, и не получается сделать каждый слайдер индивидуально, в разметке пагинаторов нет чтобы задать разные классы, это все походу добавляется через jquery где я не силен

    2) как сделать чтобы на одном из слайдов пагинация которая в виде точек — была в виде цифр + автоматич смена слайдов

    • Добрый день. Если вам нужно добавить три слайдера с разными настройками, для каждого из них нужно задать свой класс или айди. И потом три раза вызвать слайдер. Например:

      Код jquery:
      $(document).ready(function(){
      $(‘.bxslider1’).bxSlider();
      });
      $(document).ready(function(){
      $(‘.bxslider2’).bxSlider();
      });
      $(document).ready(function(){
      $(‘.bxslider3’).bxSlider();
      });

      Пагинация в виде цифр установлена по умолчанию с помощью свойства pager: true (то есть вам не нужно его добавлять, а вот если нужно убрать, то пишете pager: false). Автоматическая смена слайдов по умолчанию отключена, включается она с помощью свойства auto: true:
      $(document).ready(function(){
      $(‘.bxslider1’).bxSlider({
      auto: true
      });
      });

      Если нужно просто подключить три одинаковых слайдера к странице, пишете

      Код jquery:
      $(«.bxslider»).each(function(){
      $(this).bxSlider();
      });

      • Evgeniy

        3 слайдера не с разными настройками, а с разными стилями в CSS, вот такое не пойму как реализовать, разность стилей выражается в пагинации и контроллерах(стелки назад/вперед), в одном слайдере пагинаторы в виде точек, в другом в виде цифер, в третем прямоугольники, и все находятся еще в разных местах, ну и контроллеры тоже разные, а все что меняю в стилях — применяется одинаково ко всем слайдерам

        • В настройках слайдера предусмотрено добавление пользовательских классов для элементов управления, но в этом случае эти элементы нужно либо добавлять вручную в код, так как они исчезают из разметки, либо они добавляются снаружи контейнера слайдера, что тоже не вариант. Поэтому предлагаю добавить новые классы для блока с навигацией и для блока с пейджером.

          В коде это будут следующие строчки:
          $(«.bx-pager:first»).addClass(«first»);
          $(«.bx-pager:last»).addClass(«last»);
          $(«.bx-controls-direction:first»).addClass(«one»);
          $(«.bx-controls-direction:last»).addClass(«three»);

          Таким образом мы добавим дополнительные классы первому и третьему (последнему) элементу. И для задания разных стилей нам нужно добавить этот класс вначале для каждого стилизуемого элемента из слайдера http://codepen.io/html5book/pen/xEorrO.

          • Evgeniy

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

          • Пожалуйста. Слайдер хороший, используется во многих шаблонах вордпресс.

  • Evgeniy

    на заметку…может кому то пригодится, у меня была такая проблема как после прокрутки первого круга слайдов, на втором круге слайдер умирал, не пагинаторы ни контроллеры не работали, мучался долго, уже был подключил фаил min.js локально, в первый раз помогло, сейчас опять столкнулся с этим, подключены скрипты все локально, в общем в браузере в режиме разработчика я заглянул в консоль, там зафиксило ошибки:

    Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
    https://static.doubleclick.net/instream/ad_status.js Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

    как я понял из контекста — блочит клиент, то бишь браузер, отключив addblock и addblock plus все заработало, отключал их поодиночке, вывод таков: блочат оба

    исходя из этого возникает вопрос, много у кого установлены плагины на антирекламу, следовательно слайдер у них работать будет криво, эту ситуацию как то можно изменить ?

    • Спасибо за подсказку. Но думаю, мы с этим справиться не сможем. Вот что написано у Adblock Plus: «Блокировщик рекламы Adblock Plus убирает всю надоедливую рекламу в интернете по умолчанию, включая видео-рекламу на YouTube, рекламу Facebook, кричащие баннеры, поп-апы, поп-андеры и многое другое.» То есть даже всплывающее окно с подтверждением возможно будет блокироваться им. А уж что он подразумевает под «многое другое» — остаётся только гадать.

      • Evgeniy

        дополню, отключив эти плагины, через время опять начались проблемы, т.е. после перехода с 3го слайда на первый по второму кругу — больше ничего не листалось, такое было через раз, а еще чаще было когда обновил страницу и нажимал левый Контроллер и с первого слайда когда переключалось на 3ий — дальше ниче не работало,
        в хроме ничего примечательного в консоле не было, протестил в фаирфоксе, а вот там фаирбаг показал что блочит антивир мой (касперский интернет секюрити установлен), и спустя время хром показал подобное, почему за пол дня этого хром не показывал, понятий не имею, в итоге я снял самозащиту с антивира и завершил его процесс, за 20 мин пока что все работает в обоих браузерах, завтра проверю опять все чтобы окончательно убедиться во всем, сегодня уже мозг кипит )))

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

        https://uploads.disquscdn.com/images/bf091383cbc46e5f1a3ce0df998af16111f16ca45a714a8d7d60a63722434e4a.jpg

        https://uploads.disquscdn.com/images/0c41f4638882899de018084a3403c5cd6aaf85721956d044ba782a9a183196fe.jpg

        • Я вижу, вы тестируете на локальном сервере. В этом тоже может быть причина, и при чём такая, от которой мозг закипает, а логику найти не можешь. Поэтому если что-то делать (если есть такая возможность), то лучше на поддомене от хостинга всё тестировать, который по умолчанию даётся, закрыв его от индексации. Мы недавно на работе купили шаблон вордпресс, там стоит это плагин, так вот проблем с отображением нет.

  • Константин Кремповой

    Добрый день, при загрузке страницы показывает все слайды сразу, как от этого избавиться? спасибо

    • Можно ссылку на страницу, на словах сложно давать рекомендации

      • Константин Кремповой

        да пока локально ваяю

        • Тогда разметку страницы и скрипт с инициализацией слайдера

        • Вам нужно поменять местами ссылки на файлы в разделе head:

          <head>
          <title>ДИПЛОМАТ</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="bxslider/jquery.bxslider.css" rel="stylesheet">
          <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
          <link href="css/dopstyle.css" rel="stylesheet" media="screen">
          <script src="https://ajax.googleapis.com/aj..."></script>
          <script src="bxslider/jquery.bxslider.min.js"></script>
          <script>jQuery(document).ready(function(){
          $('.bxslider').bxSlider({
          pager: false, // отключаем индикатор количества слайдов
          nextText: '', // отключаем текст кнопки Next
          prevText: '' // отключаем текст к нопки Prev
          });
          });</script>
          </head>
          Сначала стили, потом скрипты. Стили тоже подключайте в нужном порядке, чтобы они не перекрывали другие. В самом начале урока была неточность.
          • Константин Кремповой

            Спасибо попробую

            8 янв. 2017 г. 11:35 пользователь «Disqus» написал:

  • Alex Quit

    подскажите пожалуйста как убрать рамку белого цвета вокруг слайдов, у вас в примерах ее нет, а уменя появляется

    • я не использую файл со стилями jquery.bxslider.css, который находится в папке плагина. если вы хотите её убрать, вам нужно закрыть комментарием в этом файле

      .bx-wrapper .bx-viewport {/*border: 5px solid #fff;*/}
  • Elizabeth Kobeleva

    Замечательно, но я не справилась, новичок. та же проблема, что у комментатора ниже, отображаются картинки друг за другом.

    • Если вам не помогли те рекомендации, которые я уже давала, сделайте пример в онлайн-редакторе и укажите ссылку.

      • Elizabeth Kobeleva

        Проблема оказалась в неправильном пути к файлу bxslider. Регистр букв.

  • Вопрос возник. При использовании скрипта (непрерывном показе картинок) — загружаются миниатюры. Если нажать Ф5, то все как задумано. Может подскажете в чем может быть проблема?

  • Surf Rider

    Как сделать что бы миниатюры добавлялись автоматически или хотя бы id миниатюр генерировались самостоятельно?

  • Евгений

    Здравствуйте! А что если вместо маркированного списка использовать ряд блоков div с изображениями внутри? можно ли так? почему задаю такой вопрос. при обновлении страницы промелькивают все изображения в слайдере выстроенные друг под другом. часто так получалось.

    • Здравствуйте. Уже слышала про такую проблему, но дело здесь не в разметке. Предполагаю, что причина в низкой скорости интернета. К сожалению, мне не удалось смоделировать подобную ситуацию, поэтому давайте проверим с вами.
      1) Нужно добавить блок-обёртку для слайдера, например,

      <div class="bxslider-wrap">
      <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>
      </div>

      2) Добавить стили для блока-обёртки

      .bxslider-wrap {
      visibility: hidden;
      height: 0;
      }

      3) Добавить в функцию

      jQuery(document).ready(function(){
      jQuery('.bxslider').bxSlider({
      pager: false, 
      nextText: '', 
      prevText: '',
      onSliderLoad: function(currentIndex){
      jQuery(".bxslider-wrap").css("visibility", "visible");
      jQuery(".bxslider-wrap").css("height", "auto");
      }
      });
      });

      Отпишитесь, пожалуйста, решило ли это вашу проблему.

      • Евгений

        Сейчас вроде при обновлении не появляется этого выстраивания. Только вот слайдер «стоит», изображения не меняются. Получается для этого нужно еще добавить свойств в скрипт. Подскажите еще пожалуйста куда их вставить )) (простите, просто я новичок).

  • John Doe

    Сделайте навигацию типа «хлебные крошки», а то я не понимаю в каком разделе у вас описание bxslider`а, может рядом с ним есть еще что то интересное. (: Хотелось бы прочитать про SlickSlider на русском, про его стилизацию и настройку.

    • Вы считаете, что для структуры «Уроки» — «bxSlider — установка, настройки, примеры» нужны хлебные крошки? А главная страница играет больше презентационную роль, нежели информативную. Поэтому, в данном случае это скорее бессмысленно.
      Про слайдер подумаю, нужна ли по нему инструкция на сайте, в работе пока не использовала.

  • Anton Schneider

    Скажите как сделать перелистывание слайдов курсором мыши или пальцем на сенсоре?

    • В настройки слайдера нужно добавить
      touchEnabled: true,
      oneToOneTouch: true
      touchEnabled — включает (true) и отключает перелистывание слайдов пальцем для сенсорных экранов.
      oneToOneTouch — если задано true, слайды, не использующие выцветание, будут перемещаться следом за пальцем.

  • Михаил

    Кто знает, почему в теме WordPress, при добавлении 8 картинок, на первом экране прокрутки слайдера все слайды отображаются правильно, а на втором — только один. Скриншоты: http://take.ms/TRFPAm, http://take.ms/VDKM9

  • Harry Pirogenko

    Здравствуйте Елена, нужна Ваша помощь.
    Хочу вместо стандартных картинок разместить gif-анимационные так, чтобы при переходе к тому или иному слайду гифка начинала загружаться сначала, а не стояла неподвижно.
    Я так понимаю, что нужно в js прописать что-то из этого:
    onSliderLoad:function () {
    или
    onSlideBefore:function (slideElement, oldIndex, newIndex) {
    Спасибо!

    • Здравствуйте. Уточните пожалуйста, не совсем понятно, что вы имеете в виду: вы хотите добавить в слайдер картинки в формате gif, а не jpeg?

      • Harry Pirogenko

        Хочу в точности реализовать такой-же слайдер как на этом сайте, чтобы gif прогружалась только тогда, когда осуществляется переход к новому слайду. Но не пойму как это реализовано.

        • Это не слайдер в вашем понимании, посмотрите этот пример https://codepen.io/madcat/pen/aNbayb

          • Harry Pirogenko

            нет, нет, Вы не туда видимо посмотрели, там в нижней части того сайта именно bxSlider расположен, раздел называется КАК РОЖДАЕТСЯ ДИЗАЙН?

          • )) код можете посмотреть здесь https://goo.gl/wqGxMg

          • Harry Pirogenko

            Я его смотрел, пробовал для себя. Но это почему-то не работает=(
            Скажите пожалуйста почему не вызывается по данной команде?
            $(‘.bxslider’).bxSlider({ , а только так jQuery(document).ready(function(){
            jQuery(‘.bxslider’).bxSlider({

          • Скорее всего из-за ошибки «$ is not a function».

  • Dima Chevpa

    А что писать вместо ваш_сайт если он не на хостинге

    • Если вы работаете локально, то вам не нужно указывать протокол в ссылке, а также название сайта. Сайт — это всего лишь папка с файлами, содержащая в названии имя сайта. Используйте относительные ссылки, подробнее почитайте https://html5book.ru/hyperlinks-in-html/#part2.

  • htc1xak htc1xak

    Здравствуйте.
    Подскажите, пожалуйста, у меня кнопки управления при уменьшении размера окна браузера налезают на изображение. А Заказчик хочет, чтобы не налезали никогда 🙁
    Можно как-то это сделать?
    Спасибо https://uploads.disquscdn.com/images/61715529d3188dc32e43bbe5d7a85a1c81c92660d47b2e009f93f20df4356481.jpg https://uploads.disquscdn.com/images/fc501a9df48951f135e5fa243eeb8efe0f97aa9412f28e26c519c3c3a249a562.jpg https://uploads.disquscdn.com/images/4d4c040d9f151ab8c7304888748ce6213f235e9165ad27b516a558ac9c6180c1.jpg

    • Здравствуйте. Пришлите на мою почту (указана в подвале сайте) ссылку на страницу со слайдером или код страницы с разметкой, стилями и настройками слайдера.

      • htc1xak htc1xak

        Отправил, спасибо!