background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Функциональный слайдер bxSlider

Функциональный слайдер bxSlider»
Просмотров: 34946  Скачан: 897 раз  Комментариев в теме: 10

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин bxSlider, плагин постоянно обновляеться, помимо теперешнего его функционала с уверенностью можно сказать, что в будущем он будет ещё богаче.

Функции и особенности:

1. Плагин полностью адаптирован к любым мобильным устройствам

2. Может горизонтально и вертикально менять слайды, а также режим исчезновения fade

3. Выводит любое содержимое в слайде: видео, изображения, текст

4. Расширенный режим поддержки сенсорных экранов

5. Использует CSS для смены слайдов

6. Полный интерфейс API обратного вызова и открытые методы (before, after, first, last, next, prev)

7. Небольшой размер файла плагина и простота реализации

8. Отображение и перемещение нескольких слайдов (реализации карусели, есть слайд-шоу)

9. Возможность вывести навигационные кнопок (пред./след., номера страниц, старт/стоп)

10. Слайдер кроссбраузерный, поддерживающийся: Firefox, Chrome, Safari, iOS, Android, IE7+

11. Обладает просто огромным функционалом

12. Полная совместимость со всеми версиями jQuery

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

Шаг 1 - создание разметки

 

HTML

<div class="bx-wrapper">
    <ul class="bxslider">
        <li><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" title="Поддержка браузеров: Firefox, Chrome, Safari, IOS, Android, IE7 +" /></li>
        <li>
        <div class="left"><img src="images/4.png" /></div>
            <div class="right">
                <H3>ВОЗМОЖНОСТИ СЛАЙДЕРА</H3>
                <p>Полная адаптация к любому устройству, полный интерфейс API.</p>
                <p>Горизонтальная, вертикальная смена слайдов или смена эффектом fade.</p>
                <p>Слайды могут содержать изображения, видео или контент HTML.</p>
                <p>Поддержка сенсорных экранов, использует CSS для смены слайдов.</p>
                <p>Небольшой размер файла плагина и простота реализации.</p> 
                <p>Поддержка браузеров: Firefox, Chrome, Safari, IOS, Android, IE7 +</p>
            </div>
        </li>
        <li><iframe width="765" height="410" src="http://www.youtube.com/embed/ZJPcLB4n1f8?feature=player_detailpage" frameborder="0"></iframe></li>     
        <li><iframe src="http://player.vimeo.com/video/72325961/" width="765" height="410" frameborder="0"></iframe></li>
    </ul>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            mode: 'fade',           // тип перехода между слайдами может быть 'horizontal', 'vertical', 'fade'
            captions: true,         // отображение title
            easing: 'easeInOutQuad',// анимация слайда
            controls: true,         // отображение стрелки - вперед, назад
            startSlide: 0,          // Показ начнется с заданного слайда
            infiniteLoop: true,     // показывать первый слайд за последним 
            pager: true,            // показ номера страницы
            auto: true,             // сделать автоматический переход
            autoControls: true,     // показывает кнопку плей и стоп
            video: true,            // включить видео
            pause: 4000,            // время между сменой слайдов в м-сек
            speed: 500,             // длительность перехода слайда в м-сек
            useCSS: false           // CSS переходы
        });
    });
</script>

Настройки и опции:

mode - тип перехода между слайдами 
 по умолчанию: 'horizontal' 
 Варианты: 'horizontal', 'vertical', 'fade' 
 
speed - продолжительность перехода слайдов (в мс) 
 по умолчанию: 500
 варианты: integer 
 
slideMargin - отступ между каждым слайдом
 по умолчанию: 0
 варианты: integer 
 
startSlide - показ начнется с заданного слайда (с нуля) 
 по умолчанию: 0
 варианты: integer 
 
randomStart - если значение true показ начнется с произвольного слайда 
 по умолчанию: false
 варианты: boolean (true / false) 
 
slideSelector - элемент для использования в качестве слайдов (напр. 'div.slide' ). Примечание: по умолчанию, bxSlider будет использовать всех непосредственных потомков элемента слайдер 
 по умолчанию: ''
 варианты: jQuery selector 
 
infiniteLoop - отображать первый слайд после последнего
 по умолчанию: true
 варианты: boolean (true / false) 
 
hideControlOnEnd - будучи true, спрячет кнопку 'next' при достижении последнего слайда, и наоборот. Примечание: Используется, если infiniteLoop: false 
 по умолчанию: false
 варианты: boolean (true / false)
 
easing - анимация easing, можно использовать во время переходов.  При использовании CSS переходов, включают значение для transition-timing-function. Если вы не используете CSS переходы, вы можете подключить плагин jquery.easing.1.3.js для использование многих вариантов анимации. 
 
captions - включает титры.  Подписи получаемые с title атрибута 
 по умолчанию: false
 варианты: boolean (true / false) 
 
ticker - режим непрерывного движения (подобно новостной ленте)
 по умолчанию: false
 варианты: boolean (true / false) 
 
tickerHover - будучи true, лента приостановится при наведении курсора мышки.  Примечание: эта функция не работает, если используеться CSS переходы! 
 по умолчанию: false
 варианты: boolean (true / false) 
 
adaptiveHeight - динамическая регулировка высоты слайдера на основе высоты каждого слайда 
 по умолчанию: false
 варианты: boolean (true / false)
 
adaptiveHeightSpeed - продолжительность перехода слайда по высоте (в мс).  Примечание: только если adaptiveHeight: true 
 по умолчанию: 500
 варианты: integer
 
video - включение видео
 по умолчанию: false
 варианты: boolean (true / false) 
 
responsive - включение или отключение адаптации слайдера.  Полезно, если вам нужно использовать фиксированную ширину слайда. 
 по умолчанию: true
 варианты: boolean (true / false) 
 
useCSS - если true, CSS переходы будут использоваться для горизонтальных и вертикальных анимации (используеться аппаратное ускорение).
 по умолчанию: true
 варианты: boolean (true / false) 
 
preloadImages - если true, загружает все изображения перед началом слайда. 
 по умолчанию: visible
 варианты: 'all', 'visible' 
 
touchEnabled - если true , включение сенсорного листания
 по умолчанию: true
 варианты: boolean (true / false)
 
swipeThreshold - количество пикселей не должно привышать, чтобы выполнить переход между слайдами.  Примечание: только если touchEnabled: true 
 по умолчанию: 50
 варианты: integer 
 
preventDefaultSwipeX - если true , сенсорный экран не будет двигаться вдоль оси х, при листании пальцем
 по умолчанию: true
 варианты: boolean (true / false) 
 
preventDefaultSwipeY - если true , сенсорный экран не будет двигаться вдоль оси у, при листании пальцем
 по умолчанию: false
 варианты: boolean (true / false)

Пейджер (Pager)

pager - отображать числовой (цифровой) пейджер
 по умолчанию: true
 варианты: boolean (true / false) 
 
pagerType - если 'full', пейджер отображает 1,2,3… Будучи 'short' пейджер отображает 1 / 4
 по умолчанию: 'full'
 варианты: 'full', 'short' 
 
pagerShortSeparator - буквы, используемые между цифрами пейджера, для типа 'short'. Например: значение 'of' соответствует 1 of 4
 по умолчанию: ' / ' 
 варианты: string 
 
pagerSelector - селектор jQuery – элемент, в котором содержится пейджер. Например: '#pager'
 по умолчанию: ''
 варианты: jQuery selector 
 
pagerCustom - родительский элемент для использования в качестве пейджера.  Родительский элемент должен содержать  для каждого слайда. Не для использования с динамическими каруселями. 
 по умолчанию: null
 варианты: jQuery selector 
 
buildPager - если задан, функция вызывается на каждом слайд-элементе, а возвращенное значение используется в качестве пейджера пункта разметки. 
 по умолчанию: null
 варианты: function(slideIndex)

Управление (Controls)

controls - отображать кнопки 'предыдущий' (prev) и 'следующий' (next)
 по умолчанию: true
 варианты: boolean (true / false) 
 
nextText - текст для кнопки 'следующий' (next)
 по умолчанию: 'Next'
 варианты: string
 
prevText - текст для кнопки 'предыдущий' (prev)
 по умолчанию: 'Prev'
 варианты: string 
 
nextSelector - селектор jQuery – элемент, в который помещается кнопка следующий (next) Наример: '#next'
 по умолчанию: null
 варианты: jQuery selector 
 
prevSelector - селектор jQuery – элемент, в который помещается кнопка 'предыдущий' (prev). Наример: '#prev'
 по умолчанию: null
 варианты: jQuery selector 
 
autoControls - отображать кнопки 'start' и 'stop' для авто показа
 по умолчанию: false
 варианты: boolean (true / false)
 
startText - текст, для кнопки 'start'
 по умолчанию: 'Start'
 варианты: string
 
stopText - текст, для кнопки 'stop'
 по умолчанию: 'Stop'
 варианты: string 
 
autoControlsCombine - отображать кнопки 'start' и 'stop' для авто показа
 по умолчанию: false
 варианты: boolean (true / false) 
 
autoControlsSelector - селектор jQuery – элемент, в котором содержаться элементы управления 'start' и 'stop'. Например: '#auto-controls'
 по умолчанию: null
 варианты: jQuery selector 

Автоматика (Auto)

auto - переходы (смена) слайдов происходит автоматом
 по умолчанию: false
 варианты: boolean (true / false)
 
pause - в миллисекундах, время между сменой слайдов
 по умолчанию: 4000
 варианты: integer
 
autoStart - если false, для активации показа необходимо кликнуть по кнопке 'start'
 по умолчанию: true
 варианты: boolean (true / false)
 
autoDirection - направление, в котором будет происходить авто показ слайдов
 по умолчанию: 'next'
 варианты: 'next', 'prev'
 
autoHover - если true, встанет на паузу при наведении курсора мышки на изображение
 по умолчанию: false
 варианты: boolean (true / false) 
 
autoDelay - в миллисекундах, количество времени перед стартом авто показа
 по умолчанию: 0
 варианты: integer

Карусель (Carousel)

minSlides - минимальное количество слайдов
 по умолчанию: 1
 варианты: integer 
 
maxSlides - максимальное количество слайдов
 по умолчанию: 1
 варианты: integer 
 
moveSlides - количество слайдов, двигающиеся по переходу.  Должно быть задано в minSlides , и maxSlides .  Если ноль (по умолчанию), будет использоваться число полностью видимых слайдов. 
 по умолчанию: 0
 варианты: integer 
 
slideWidth - ширина каждого слайда.  Этот параметр является обязательным для всех горизонтальных каруселей! 
 по умолчанию: 0
 варианты: integer

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

onSliderLoad - выполняет после слайдер с полной загрузкой 
 по умолчанию: function(){}
 варианты: function(currentIndex){ // ваш код здесь }
 
onSlideBefore - выполняет непосредственно перед каждым переходом слайда. 
 по умолчанию: function(){}
 варианты: function($slideElement, oldIndex, newIndex){ // ваш код здесь }
 
onSlideAfter - выполняет функцию после каждого перехода 
 по умолчанию: function(){}
 варианты: function($slideElement, oldIndex, newIndex){ // ваш код здесь }
 
onSlideNext - выполняет предоставленную функцию, когда выполнен переход от кнопки 'next' (следующий)
 по умолчанию: function(){}
 варианты: function($slideElement, oldIndex, newIndex){ // ваш код здесь }
 
onSlidePrev - выполняет функцию, когда выполнен переход от кнопки 'previous' (предыдущий)
 по умолчанию: function(){}
 варианты: function($slideElement, oldIndex, newIndex){ // ваш код здесь }

Публичные функции (Public methods)

goToSlide - переход к заданному слайду. Слайды: ползунки отсчитываются с нуля
 example: slider = $('.bxslider').bxSlider();
 slider.goToSlide(3); 
 
goToNextSlide - переход к слудующему слайду
 example: slider = $('.bxslider').bxSlider();
 slider.goToNextSlide(); 
 
goToPrevSlide - переход к предыдущему слайду
 example: slider = $('.bxslider').bxSlider();
 slider.goToPrevSlide(); 
 
startAuto - запускает автопоказ.  
 example: slider = $('.bxslider').bxSlider();
 slider.startAuto(); 
 
stopAuto - останавливает автопоказ
 example: slider = $('.bxslider').bxSlider();
 slider.stopAuto();
 
getCurrentSlide - возвращает текущий индекс слада
 example: slider = $('.bxslider').bxSlider();
 var current = slider.getCurrentSlide();
 
getSlideCount - возвращает число всех слайдов
 example: slider = $('.bxslider').bxSlider();
 var slideQty = slider.getSlideCount();
 
reloadSlider - повторно инициализирует слайд-шоу
 example: slider = $('.bxslider').bxSlider();
 slider.reloadSlider(); 
 
destroySlider - разрушает активное слайд-шоу
 example: slider = $('.bxslider').bxSlider();
 slider.destroySlider();

Теперь, что касается эффектов перехода Easing. Как вы видите, мы уже подключили плагин jquery.easing.1.3 выше, теперь если хотите использовать в слайдере другой эффект перехода слайдшоу, то в представленном выше скрипте найдите строку easing: 'easeInOutQuad', значение 'easeInOutQuad' замените на любое из предложенных ниже:

Краткий список эффектов Easing

easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

Последним хотелось бы отметить тот факт, что в слайдере вы можете использовать видео, подключая его с таких источников как youtube, vimeo (iframe и object, embed).

Таблица для общего понятия совместимости в браузерах.

Обозначение:

FF - Firefox 3+ - все отлично работает.

C - Chrome - в некоторых случаях игнорирует попытку JavaScript получить доступ к структуре с URL.

S - Safari 4+ - замечены  не критичные проблемы с HTML5.

O - Opera 9+ - замечены некоторые проблемы с iframe ( YouTube).

IE10 - Internet Explorer 10 - все отлично работает.

IE9 - Internet Explorer 9 - все отлично работает.

IE8 - Internet Explorer 8 - не поддерживает HTML5.

IE7 - Internet Explorer 7 - не поддерживает HTML5 и iframe.

Материалы по теме:

Kenburner слайдерKenburner слайдер

Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов....

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Inf...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...
Интересные публикации:

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

Обратная связь на JQuery, PHP и MySQLОбратная связь на JQuery, PHP и MySQL

Красивая форма обратной связи на PHP/JQuery и MySQL. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых ва...

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на css +30...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню на css...

Горизонтальное меню на css3 с замечательным эффектом....
  • Текущий 3.25/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 3.3/5( Голосов 16 )

Комментариев в теме: (10)
↑ 0 ↓
sultan
спасибо вам за сайт
Ответить Ответ с цитатой
↑ 0 ↓
ch.a.va
Добрый день. Как разместить несколько слайдеров с разными свойствами css на одной странице?
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Здравствуйте, вам стоит задать стилевой атрибут class, который позволит связать определенный тег со стилевым оформлением. Также для управления стилями можно использовать атрибут ID.

Ответить Ответ с цитатой
↑ 0 ↓
music_answer
Спасибо огромное за статью. Подскажите, а есть возможность добавить на слайдер кнопку ( нужно сдать кнопку перехода на страницу контактов) Если да - то не поделить информацией, как? Огромное спасибо заранее.
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Прокомментировано пользователя: music_answer
нужно сдать кнопку перехода на страницу контактов


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

Ответить Ответ с цитатой
↑ 0 ↓
Алексей
Приветствую. Подскажите как решить такую проблему: при начальной загрузке страницы из слайдера вываливаются все картинки вниз, секунда, но вид портит. Как решить?
Ответить Ответ с цитатой
↑ +4 ↓
ADMIN
Здравствуйте, это происходит из за поздней подгрузке js. То есть браузер читает код вашей страницы сверху вниз, и если скажем jquery.bxslider.js прописан в коде страницы внизу, то и подгрузит его браузер позднее.
Решений есть несколько, вам стоит прописать js в шапке страницы (шаблона), если же у вас он там и прописан, в таком случае посмотрите не подгружается ли перед ним какой нибудь другой весомый код.
Так же, может быть у вас тяжёлая страница, то есть не оптимизированные стили CSS (слишком тяжёлые). Данная проблема так же встречается довольно часто, из за кривой верстки сайта. Собственно все эти факторы и влияют на загрузку всей страницы или отдельного кода (это и есть те доли секунды). Скажем для увеличения скорости чтения кода браузером, его можно сжать.

Ответить Ответ с цитатой
↑ +1 ↓
Js
Это один из не многих слайдеров, которые реально можно применить у себя на сайте и не пожалеть о потраченном времени. С настройками тут тонкое дело, пока разберёшься мозги закипят))).
Ответить Ответ с цитатой
↑ 0 ↓
Лешик
Спасибо, реально удобный плагин на сайт установил без проблем.
Ответить Ответ с цитатой
↑ +1 ↓
Александр
Слайдер понравился, довольно гибкий в плане функциональности, искал описания функций в гугле, все на английском у вас нашёл на русском за что огромное спасибо.
Ответить Ответ с цитатой

Страницы: 1

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить