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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.5. Карусель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    По мне, это довольно сложно, во все, это, вникать. Куда проще воспользоваться плагином для 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, который находится в папке плагина. если вы хотите её убрать, вам нужно закрыть комментарием в этом файле

  • Elizabeth Kobeleva

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

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

      • Elizabeth Kobeleva

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