Слайдеры изображений на плагине bxSlider

13.02.2020
20592
1 комментарий

BxSlider отличный jquery плагин слайдеров и каруселей, адаптивный, легко настраивается, поддерживает любой тип контента. Рассмотрим его применение но примерах галерей изображений.

Описание параметров и методов https://bxslider.com/options, проект на GitHub.

1

Параметр pager: true включит вывод постраничной навигации слайдера, остается только оформить CSS стили.

<div class="slider">
	<ul>
		<li><a href="#"><img src="/images/1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/2.jpg" alt=""></a></li>
		...
	</ul>
</div>

<script src="/jquery.min.js"></script>
<script src="/bxslider/dist/jquery.bxslider.min.js"></script>

<script>
$(document).ready(function(){
	$('.slider ul').bxSlider({
		pager: true,	
		controls: false,   
		auto: true,
		pause: 10000,
		minSlides: 1,
		maxSlides: 1
	});
});
</script>
HTML 
.slider {
	height: 600px;
	overflow: hidden;
}
.slider ul {
	margin: 0;
	padding: 0;
}

/* Пагинация */
.slider .bx-pager {
	text-align: center;
	padding: 20px 0;
}
.slider .bx-pager-item {
	display: inline-block;
	margin: 0 4px;
}
.slider .bx-pager-item a {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	border: 1px solid #999;
	overflow: hidden;
	text-indent: 999px;    
}
.slider .bx-pager-item a.active {
	background: #ffe318;
}
.slider .bx-pager-item a:hover {
	background: #f3e792;
}
CSS

Результат:

2

Для режима карусели нужно указать следующие настройки:

  • minSlides: 3 – минимальное кол-во слайдов.
  • maxSlides: 3 – максимальное кол-во слайдов.
  • slideMargin: 20 – отступ между слайдами.
  • slideWidth: 236 – ширина слайда.
<div class="slider">
	<ul>
		<li><a href="#"><img src="/images/1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/2.jpg" alt=""></a></li>
		...
	</ul>
</div>

<script src="/jquery.min.js"></script>
<script src="/bxslider/dist/jquery.bxslider.min.js"></script>

<script>
$(document).ready(function(){
	$('.slider ul').bxSlider({
		pager: true,
		controls: false,
		auto: true,
		pause: 10000,
		minSlides: 3,
		maxSlides: 3,
		slideMargin: 20,        
		slideWidth: 236
	});
});
</script>
HTML 
.slider {
	height: 220px;
	overflow: hidden;
}
.slider ul {
	margin: 0;
	padding: 0;
}
.slider ul li img {
	width: 100%;
	height: auto;
}

/* Пагинация */
.slider .bx-pager {
	text-align: center;
	padding: 20px 0;
}
.slider .bx-pager-item {
	display: inline-block;
	margin: 0 4px;
}
.slider .bx-pager-item a {
	display: inline-block;
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-indent: 999px;
	background: #fff;
	border-radius: 50%;
	border: 1px solid #999;
}
.slider .bx-pager-item a.active {
	background: #ffe318;
}
.slider .bx-pager-item a:hover {
	background: #f3e792;
}
CSS

Результат:

3 
<div class="slider">
	<ul>
		<li><a href="#"><img src="/images/1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/2.jpg" alt=""></a></li>
		...
	</ul>
</div>

<script src="/jquery.min.js"></script>
<script src="/bxslider/dist/jquery.bxslider.min.js"></script>

<script>
$(document).ready(function(){
	$('.slider ul').bxSlider({
		pager: true,
		controls: false,
		auto: true,
		pause: 10000,
		minSlides: 1,
		maxSlides: 1
	});
});
</script>
HTML 
.slider {
	height: 540px;
	overflow: hidden;
}
.slider ul {
	margin: 0;
	padding: 0;
}
.slider .bx-wrapper {
	position: relative;
}

/* Пагинация */
.slider .bx-controls {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.slider .bx-pager {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 30px;
	text-align: center;
}
.slider .bx-pager-item {
	display: inline-block;
	margin: 0 4px;
	position: relative;
	z-index: 100;
}
.slider .bx-pager-item a {
	display: inline-block;
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-indent: 999px;
	background: #fff;
	border-radius: 50%;
	border: 1px solid #999;
}
.slider .bx-pager-item a.active {
	background: #ffe318;
}
.slider .bx-pager-item a:hover {
	background: #f3e792;
}
CSS

Результат:

4

Чтобы вынести кнопки навигации за пределы слайдера, нужно создать HTML-разметку. Количество ссылок должно совпадать с количеством слайдов, в атрибуте data-slide-index указывается порядковый номер слайда.

<div class="pager">
	<a data-slide-index="0" href="#">1</a>
	<a data-slide-index="1" href="#">2</a>
	...
</div>
HTML

В настройках плагина указывается класс контейнера с ссылками:

<script>
$(document).ready(function(){
	$('.slider ul').bxSlider({
		pager: true,
		pagerCustom: '.pager'
	});
});
JS 
<div class="slider-title">
	<h1>Заголовок слайдера</h1>
	<div class="slider-title-control">
		<a data-slide-index="0" href="#">1</a>
		<a data-slide-index="1" href="#">2</a>
		...
	</div>
</div>

<div class="slider">
	<ul>
		<li><a href="#"><img src="/images/1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/2.jpg" alt=""></a></li>
		...
	</ul>
</div>

<script src="/jquery.min.js"></script>
<script src="/bxslider/dist/jquery.bxslider.min.js"></script>

<script>
$(document).ready(function(){
	$('.slider ul').bxSlider({
		pager: true,
		pagerCustom: '.slider-title-control',
		controls: false,
		auto: true,
		pause: 10000,        
		mode: 'fade',
		minSlides: 1,
		maxSlides: 1
	});
});
</script>
HTML 
.slider-title {
	position: relative;
}
.slider-title-control {
	position: absolute;
	top: 10px;
	right: 0;
}
.slider-title-control a {
	display: inline-block;
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-indent: 999px;
	background: #fff;
	border-radius: 50%;
	border: 1px solid #999;
	margin: 0 0 0 4px;
}
.slider-title-control a.active {
	background: #ffe318;
}
.slider-title-control a:hover {
	background: #f3e792;
}

.slider {
	height: 540px;
	overflow: hidden;
}
.slider ul {
	margin: 0;
	padding: 0;
}
CSS

Результат:

5

Включенный параметр controls выводит кнопки-листалки «Prev» и «Next», также понадобятся изображения:

<div class="slider">
	<ul>
		<li><a href="#"><img src="/images/1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/2.jpg" alt=""></a></li>
		...
	</ul>
</div>

<script src="/jquery.min.js"></script>
<script src="/bxslider/dist/jquery.bxslider.min.js"></script>

<script>
$(document).ready(function(){
	$('.slider ul').bxSlider({
		pager: false,
		controls: true,
		auto: true,
		pause: 10000,        
		mode: 'fade',
		minSlides: 1,
		maxSlides: 1
	});
});
</script>
HTML 
.slider {
	height: 540px;
	overflow: hidden;
}
.slider ul {
	margin: 0;
	padding: 0;
}
.slider .bx-wrapper{
	position: relative;
}
.slider .bx-controls{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Кнопки управления */
.slider .bx-controls-direction {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.slider .bx-controls-direction a:hover {
	filter: brightness(90%);
}
.slider .bx-prev {
	background: url(/images/prev.png) 0 0 no-repeat; 
	display: inline-block; 
	width: 30px;
	height: 30px;	
	position: absolute;
	margin-top: -15px;	
	top: 50%;
	left: 30px;
	overflow: hidden;
	text-indent: 999px; 
	z-index: 1000;
}
.slider .bx-next {
	background: url(/images/next.png) 0 0 no-repeat;    
	display: inline-block; 
	width: 30px;
	height: 30px;
	position: absolute;
	margin-top: -15px;	
	top: 50%;
	right: 30px;
	overflow: hidden;
	text-indent: 999px;
	z-index: 1000;
}
CSS

Результат:

6 
<div class="slider">
	<ul>
		<li><a href="#"><img src="/images/1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/2.jpg" alt=""></a></li>
		...
	</ul>
</div>

<script src="/jquery.min.js"></script>
<script src="/bxslider/dist/jquery.bxslider.min.js"></script>

<script>
$(document).ready(function(){
	$('.slider ul').bxSlider({
		pager: false,
		controls: true,
		auto: false,
		pause: 10000,
		minSlides: 2,
		maxSlides: 2,
		slideMargin: 20,   
		slideWidth: 300       
	});
});
</script>
HTML 
.slider {
	height: 230px;
	overflow: hidden;
}
.slider ul {
	margin: 0;
	padding: 0;
}
.slider ul li img {
	width: 100%;
	height: auto;
}
.slider .bx-wrapper{
	position: relative;
	margin: 0 auto;
}
.bx-viewport {
	z-index: 1;
}
.slider .bx-controls{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Кнопки управления */
.slider .bx-controls-direction {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.slider .bx-controls-direction a:hover {
	filter: brightness(90%);
}
.slider .bx-prev {
	background: url(/images/prev.png) 0 0 no-repeat; 
	display: inline-block; 
	width: 30px;
	height: 30px;	
	position: absolute;
	margin-top: -15px;	
	top: 50%;
	left: -50px;
	overflow: hidden;
	text-indent: 999px; 
	z-index: 1000;
}
.slider .bx-next {
	background: url(/images/next.png) 0 0 no-repeat;    
	display: inline-block; 
	width: 30px;
	height: 30px;
	position: absolute;
	margin-top: -15px;	
	top: 50%;
	right: -50px;
	overflow: hidden;
	text-indent: 999px;
	z-index: 1000;
}
CSS

Результат:

7 
<div class="slider">
	<ul>
		<li><a href="#"><img src="/images/1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/2.jpg" alt=""></a></li>
		...
	</ul>
</div>

<script src="/jquery.min.js"></script>
<script src="/bxslider/dist/jquery.bxslider.min.js"></script>

<script>
$(document).ready(function(){
	$('.slider ul').bxSlider({
		pager: false,
		controls: true,
		auto: true,
		mode: 'fade',
		pause: 10000,
		minSlides: 1,
		maxSlides: 1
	});
});
</script>
HTML 
.slider {
	height: 540px;
	overflow: hidden;
}
.slider ul {
	margin: 0;
	padding: 0;
}
.slider .bx-wrapper{
	position: relative;
}
.slider .bx-controls{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}

/* Кнопки управления */
.slider .bx-controls-direction {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 30px;
	text-align: right;
}
.slider .bx-controls-direction a:hover {
	filter: brightness(90%);
}
.slider .bx-prev {
	background: url(/images/prev.png) 0 0 no-repeat; 
	display: inline-block; 
	width: 30px;
	height: 30px;
	margin: 0 5px;
	overflow: hidden;
	text-indent: 999px; 
	z-index: 1000;
}
.slider .bx-next {
	background: url(/images/next.png) 0 0 no-repeat;    
	display: inline-block; 
	width: 30px;
	height: 30px;
	margin: 0 5px;
	overflow: hidden;
	text-indent: 999px;
	z-index: 1000;
}
CSS

Результат:

8

Чтобы вынести кнопки «Prev» и «Next» за пределы слайдера нужно добавить контейнеры для кастомных кнопок.

<div class="custom-prev"></div>
<div class="custom-next"></div>
HTML

И указать их классы или id в параметры слайдера:

$(document).ready(function(){
	$('ul').bxSlider({
		controls: true,
		prevSelector: '.custom-prev',
		nextSelector: '.custom-next'    
	});				
});
JS

После инициализации плагина, в эти контейнеры добавятся ссылки с классами bx-prev и bx-next.

<div class="slider-title">
	<h1>Заголовок слайдера</h1>
	<div class="slider-title-control">
		<div class="slider-title-prev"></div>
		<div class="slider-title-next"></div>
	</div>
</div>

<div class="slider">
	<ul>
		<li><a href="#"><img src="/images/1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/2.jpg" alt=""></a></li>
		...
	</ul>
</div>

<script src="/jquery.min.js"></script>
<script src="/bxslider/dist/jquery.bxslider.min.js"></script>

<script>
$(document).ready(function(){
	$('.slider ul').bxSlider({
		controls: true,
		prevSelector: '.slider-title-prev',
		nextSelector: '.slider-title-next',        
		pager: false,		
		auto: false,
		pause: 0,
		minSlides: 3,
		maxSlides: 3,
		slideMargin: 20,  
		slideWidth: 279      
	});				
});
</script>
HTML 
.slider-title {
	position: relative;
}
.slider-title-control {
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
}
.slider-title-control a:hover {
	filter: brightness(90%);
}
.slider-title-prev {
	display: inline-block;
}
.slider-title-prev a {
	width: 30px;
	height: 30px;	
	background: url(/images/prev.png) 0 0 no-repeat; 
	display: inline-block;
	overflow: hidden;
	text-indent: 999px; 
}
.slider-title-next {
	display: inline-block;
}
.slider-title-next a {
	width: 30px;
	height: 30px;	
	background: url(/images/next.png) 0 0 no-repeat; 
	display: inline-block;
	overflow: hidden;
	text-indent: 999px; 
}

.slider {
	height: 158px;
	overflow: hidden;
}
.slider ul {
	margin: 0;
	padding: 0;
}
.slider ul li img {
	width: 100%;
	height: auto;
}
CSS

Результат:

9 
<div class="slider">
	<ul>
		<li><a href="#"><img src="/images/1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/2.jpg" alt=""></a></li>
		...
	</ul>
</div>

<script src="/jquery.min.js"></script>
<script src="/bxslider/dist/jquery.bxslider.min.js"></script>

<script>
$(document).ready(function(){
	$('.slider ul').bxSlider({
		pager: true,
		controls: true,
		auto: true,
		mode: 'fade',
		pause: 10000,
		minSlides: 1,
		maxSlides: 1
	});
});
</script>
HTML 
.slider {
	height: 540px;
	overflow: hidden;
}
.slider ul {
	margin: 0;
	padding: 0;
}
.slider .bx-wrapper {
	position: relative;
}
.slider .bx-controls {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Пагинация */
.slider .bx-pager {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 30px;
	text-align: center;
}
.slider .bx-pager-item {
	display: inline-block;
	margin: 0 4px;
	position: relative;
	z-index: 100;
}
.slider .bx-pager-item a {
	display: inline-block;
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-indent: 999px;
	background: #fff;
	border-radius: 50%;
	border: 1px solid #999;
}
.slider .bx-pager-item a.active {
	background: #ffe318;
}
.slider .bx-pager-item a:hover {
	background: #f3e792;
}

/* Кнопки управления */
.slider .bx-controls-direction {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.slider .bx-controls-direction a:hover {
	filter: brightness(90%);
}
.slider .bx-prev {
	background: url(/images/prev.png) 0 0 no-repeat; 
	display: inline-block; 
	width: 30px;
	height: 30px;	
	position: absolute;
	margin-top: -15px;	
	top: 50%;
	left: 30px;
	overflow: hidden;
	text-indent: 999px; 
	z-index: 1000;
}
.slider .bx-next {
	background: url(/images/next.png) 0 0 no-repeat;    
	display: inline-block; 
	width: 30px;
	height: 30px;
	position: absolute;
	margin-top: -15px;	
	top: 50%;
	right: 30px;
	overflow: hidden;
	text-indent: 999px;
	z-index: 1000;
}
CSS
10

Для связки слайдов и списком миниатюр потребуется указать в атребуте pagerCustom его селектр и расставить индексы с помощью атрибута data-slide-index="0".

HTML

<div class="slider">
	<ul>
		<li><a href="#"><img src="/images/1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/2.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/3.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/4.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/5.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/6.jpg" alt=""></a></li>
	</ul>
</div>

<div class="slider_pager">
	<ul>
		<li><a data-slide-index="0"><img src="/images/1.jpg" alt=""></a></li>
		<li><a data-slide-index="1"><img src="/images/2.jpg" alt=""></a></li>
		<li><a data-slide-index="2"><img src="/images/3.jpg" alt=""></a></li>
		<li><a data-slide-index="3"><img src="/images/4.jpg" alt=""></a></li>
		<li><a data-slide-index="4"><img src="/images/5.jpg" alt=""></a></li>
		<li><a data-slide-index="5"><img src="/images/6.jpg" alt=""></a></li>
	</ul>
</div>

<script src="/jquery.min.js"></script>
<script src="/bxslider/dist/jquery.bxslider.min.js"></script>
 
<script>
$(document).ready(function(){
	$('.slider ul').bxSlider({
		pagerCustom: '.slider_pager ul',
		controls: true,  
		auto: false,
		minSlides: 1,
		maxSlides: 1
	});
});
</script>
HTML 
.slider {
	height: 535px;
	overflow: hidden;
	margin-bottom: 20px;
}
.slider ul {
	margin: 0;
	padding: 0;
}

/* Кнопки управления */
.bx-wrapper {
	position: relative;
}
.slider .bx-controls-direction {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 536px;
}
.slider .bx-controls-direction a:hover {
	filter: brightness(90%);
}
.slider .bx-prev {
	background: url(/prev.png) 0 0 no-repeat; 
	display: inline-block; 
	width: 30px;
	height: 30px;	
	position: absolute;
	margin-top: -15px;	
	top: 50%;
	left: 30px;
	overflow: hidden;
	text-indent: 999px; 
	z-index: 1000;
}
.slider .bx-next {
	background: url(/next.png) 0 0 no-repeat;    
	display: inline-block; 
	width: 30px;
	height: 30px;
	position: absolute;
	margin-top: -15px;	
	top: 50%;
	right: 30px;
	overflow: hidden;
	text-indent: 999px;
	z-index: 1000;
}

/* Превью */
.slider_pager ul {
	margin: 0;
	padding: 0;
}
.slider_pager li {
	margin: 0 1px 10px 0;
	display: inline-block;
	width: 113px;
}
.slider_pager li a img {
	border: 1px solid #ddd;
	width: 100%;
	height: auto;
}
.slider_pager .active img {
	border: 1px solid rgb(5, 70, 162);
}
CSS

Результат:

13.02.2020, обновлено 12.11.2021
20592
#CSS #HTML #jQuery #Изображения
Предыдущая запись Изменение размеров textarea и других элементов
Следующая запись Готовые CSS стили для таблиц

Комментарии 1

Nik Destrave Nik Destrave
6 июля 2021 в 16:44
.slider_pager ul li {
display:
}
Не дописали стиль
Ответить

, чтобы добавить комментарий.

Другие публикации

Пример парсинга html-страницы на phpQuery
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
66536
+27
Описание мета-тегов
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
29501
+5
Модальные окна на Fancybox 3
Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
71209
+2
Печать HTML страниц
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
64655
+7
Повышение результатов PageSpeed Insights
Повышение результатов PageSpeed Insights
Сборник советов как поднять оценку в PageSpeed Insights.
15643
+3
Как изменить Favicon сайта из JavaScript
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
13293
+1