Слайдер для сайта на всю ширину с фиксированной высотой

Дмитрий Британ | 20.11.2014 | 18 комментариев

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

Адаптивного слайдер с фиксированной высотой

К написанию этого поста меня натолкнул один из комментариев к посту Слайдер для сайта, Александр, если вы это читаете, спасибо вам за ваши комментарии 🙂

И так приступим:

Шаг 1. Скачаем плагин слайдера для сайта

Качать будем тот же плагин что и в этом посту Слайдер для сайта, но более новую его версию.

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

[button-brown url="//github.com/OwlFonk/OwlCarousel2/archive/master.zip" target="" position="center"]Полный архив плагина (zip)[/button-brown]

[button-green url="//www.owlcarousel.owlgraphic.com/index.html" target="_blank" position="center"]Сайт плагина Owl Carousel 2[/button-green]

Архив плагина скачиваем и к себе в проект добавляем следующие файлы:

<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.css">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

Шаг 2. Создаем HTML структуру слайдера для сайта

Делаем HTML структуру адаптивного слайдера:

<div id="slider" class="owl-carousel">
	<div class="slide">
		<img src="images/01.jpg" alt="">
	</div>
	<div class="slide">
		<img src="images/02.png" alt="">
	</div>
	<div class="slide">
		<img src="images/03.jpg" alt="">
	</div>
</div>

И подключаем к блоку #slider сам плагин с настройками:

$(document).ready(function($) {

	$("#slider").owlCarousel({
		items: 1,
		loop: true,
		autoplay: true,
		animateOut: 'fadeOut'
	});

});

В результате у нас получиться адаптивный слайдер на всю ширину экрана:

[button-green url="//demo.webcomplex.com.ua/20-11-2014/01/" target="_blank" position="center"]Пример адаптивного слайдера на всю ширину экрана[/button-green]

[alert-announce]Но если мы будем изменять ширину экрана браузера, то вместе с шириной будет меняться и высота самого слайдера, а нам нужно чтобы слайдер всегда был одной высоты[/alert-announce]

Шаг 3. Установим плагин liCover

Для решения задачи с фиксированной высотой адаптивного слайдера скачаем и установим плагин liCover.

[button-green url="//masscode.ru/index.php/k2/item/45-lifullsize" target="_blank" position="center" rel="nofollow"]Ссылка на сайт liCover[/button-green]

Плагин очень легкий и хорошо справляется с поставленной задачей.

Подключим его к себе в проект:

Инициализируем плагин:

	$(window).load(function(){
		$('#slider img').liCover({
			parent: $("#slider"),
			position:'absolute',
			veticalAlign:'middle',
			align:'center'
		})
	})

Плагин применяем к тегу img нашего слайдера #slider и в качестве родительского элемента указываем тот же блок #slider.

#slider, .slide {height: 450px; width: 100%;}

[alert-announce]Теперь чтобы плагин понимал какой высоты должен быть наш слайдер , пропиши это значение в стилях[/alert-announce]

Высоту задаем, как для слайдера, так и для блока слайда.

Вот таким образом с комбинацией двух плагинов мы сделали адаптивный слайдер с фиксированной высотой.