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

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

ОБСУЖДЕНИЕ

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

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

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин 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.

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

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jqu...

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

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

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

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......
Интересные публикации:

Галерея на jQueryГалерея на jQuery

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

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

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

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

Sell v1.4.1Sell v1.4.1

Sell - это ещё одна довольно гибкая универсальная тема для создания интернет магазина на WordPress с использованием WooCommerce....

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......
  • Текущий 3.25/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (11)
↑ 0 ↓
dmondma dima
Всем привет, хорошая статья, еще есть ссылка на генератор bxslider http://www.hmil.ru/generator-bxslider/
Ответить Ответ с цитатой
↑ 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  2 Следующая Последняя

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


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