Обзор еще одного слайдера под библиотеку jQuery под названием bxSlider.
Данный слайдер обладает полным набором возможностей, адаптивный и легко устанавливается в проекте. Адрес проживания слайдера bxSlider - The Responsive jQuery Content Slider.
Конкретно какими возможностями обладает bxSlider:
- полностью адаптивный
- может быть горизонтальным, вертикальным
- может содержать в себе изображения, видео или HTML-контент
- поддержка функций touch/swipe
- для анимаций используются CSS transitions
- маленький размер файла, легко видоизменяется и настраивается
- поддержка браузерами Firefox, Chrome, Safari, iOS, Android, Ie7+
- большое число настроек
Установка слайдера bxSlider
Установка bxSlider ничем не отличается от установки ему подобных скриптов для создания carousel. Скачиваем с сайта архив - в нем есть все необходимое для подключения и работы. Помимо этого, там есть несколько дополнительных файлов типа 1
jquery.easing.1.3.js
1
jquery.fitvids.js
В HTML-файле перед закрывающим тегом body произвожу подключение скриптов в таком порядке:
...
<!-- SCRIPTS -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/bxslider.js"></script>Файл 1
jquery.bxslider.min.js
1
bxslider.js
В 1
head
1
jquery.bxslider.css
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="css/jquery.bxslider.css">
...
</head>Плагин bxSlider подключен и готов к работе. Осталось создать HTML-разметку для него.
HTML-разметка для слайдера bxSlider
Внутри тега 1
body
1
li
1
li
1
ul
<ul class="slider">
<li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
<li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
<li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
<li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
</ul>Инициализация скрипта bxSlider
В созданном ранее js-файле 1
bxslider.js
1
$(document).ready()
$(document).ready(function(){
$('.slider').bxSlider();
});Смотрю готовый результат:
Слайдер bxSlider запущен и работает - есть кнопки пагинации и перемотки, изображения крутятся при нажатии на них. Пробую отключить таблицу стилей 1
jquery.bxslider.css
Стилизация слайдера bxSlider
Произведу небольшую стилизацию слайдера bxSlider. Для этого необходимо воспользоваться плагином Firebug под браузер Mozilla Firefox, чтобы инспектировать DOM-дерево и находить нужные HTML-элементы с их классами. Как можно было понять из базовой HTML-разметки, все элеметы управления слайдером генерируются скриптом автоматически.
Стилизация слайдера bxSlider с помощью CSS-правил (в данном примере это SCSS) может быть такой:
$asidePos: 50px;
$color: #778899;
.bx-wrapper{
margin: 10px auto;
width: 300px;
border: 5px solid #fff;
box-shadow: 0 0 5px #ccc;
position: relative;
.bx-viewport{
box-shadow: 0 0 5px #ccc;
}
/* Скрывать пагинацию */
.bx-pager{
display: none;
}
/* Кнопки перемотки */
.bx-prev,
.bx-next{
position: absolute;
top: 92px;
width: 20px;
height: 20px;
background-color: $color;
@include squish-text;
@include border-radius(50%);
@include single-transition(background-color, .1s, ease-in-out);
&:hover,&:focus{
outline: none;
background-color: darken($color,5%);
}
&:active{
background-color: darken($color,10%);
}
}
.bx-prev{
left: -$asidePos;
}
.bx-next{
right: -$asidePos;
}
img{
vertical-align: top;
}
}И посмотрим результат наших трудов. Уже гораздо лучше, однако:
Настройка слайдера bxSlider
Плагин bxSlider имеет большое количество настроек, которые легко подключать в коде. Разнообразные (и многочисленные) примеры создания слайдера приведены на странице - Examples. Эти примеры можно и стоит изучить (хотя бы слегка, для будущего).
В этой статье давайте я воссоздам один из приведенных на странице Examples примеров. Пусть это будет слайдер с автоматической прокруткой и кнопками управления прокруткой - запуско и остановкой. Такой готовый пример размещен здесь - Auto show with start / stop controls. Я просто сделаю свой собственный дубликат, со своими стилями.
Для этого в SCSS-коде добавляю такие строки:
/* auto controls */
.bx-controls-auto{
margin: 5px 0 0;
@include pie-clearfix;
.bx-controls-auto-item{
display: inline-block;
float: left;
.bx-start,
.bx-stop{
display: block;
@include squish-text;
@include single-transition(background-color, .1s, ease-in-out);
}
.bx-start{
@include arrow-right(7px,lighten($color,20%));
}
.bx-stop{
width: 14px;
height: 14px;
margin: 0 0 0 5px;
background-color: lighten($color,20%);
}
}
}HTML-разметку на странице я не меняю, как вы могли заметить. Блок 1
.bx-controls-auto
Файл настроек 1
bxslider.js
$(document).ready(function(){
$('.slider').bxSlider({
auto: true,
autoControls: true
});
});Смотрю результат в браузере:
Отлично! Появились кнопки запуска и остановки показа слайдшоу; сам слайдер стартует автоматически, при открытии страницы в окне браузера.
Заключение
Плагин bxSlider мне однозначно понравился. Семнатичная простая разметка, использование произвольного имени класса (а не идентификатора), автоматическое генерирование HTML-элементов слайдера, большое количество настроек, хорошие эффекты, простота подключения.
Все эти преимущества однозначно сделали плагин bxSlider номером один в моей копилке.