Как сделать адаптивный (резиновый) слайдер изображений с помощью jQuery и CSS3

Прежде чем начать, скажу что нам потребуется подключить две внешних библиотеки:

  1. FlexSlider — плагин используемый разработчиками WooThemes, работает быстро без нареканий. Вы можете скачать плагин отдельно с официального сайта или все вместе с исходниками в конце статьи.
  2. Библиотека jQuery — ее мы подключим непосредственно из репозитория Google.
Оглавление

Разметка структуры HTML

Итак, начнем с html разметки слайдера. Создаем блок <div> с классом «flex-container» внутри создадим еще один блок <div> с классом “flex-slider” в котором будут размещены все элементы управления слайдером. Последнее что нужно будет сделать по разметке, — это создать упорядоченный список в который мы и будем добавлять наши изображения слайдов. Каждый слайд должен быть внутри элемента списка.

				
					<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li><a href="#"><img decoding="async" alt="Сервера, Web и не только" src="img/slide1.jpg" title="Сервера, Web и не только - ОС, IT, Web"></a></li>
<li><img decoding="async" alt="Сервера, Web и не только" src="img/slide2.jpg" title="Сервера, Web и не только - ОС, IT, Web"></li>
<li><img decoding="async" alt="Сервера, Web и не только" src="img/slide3.jpg" title="Сервера, Web и не только - ОС, IT, Web">
 
Попробуйте изменить размер окна</li>
</ul>
</div>
</div>
				
			

Далее подключаем библиотеку jQuery и FlexSlider плагин

				
					<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript">// <![CDATA[
 $(document).ready(function () {
 $('.flexslider').flexslider({
 animation: 'fade',
 controlsContainer: '.flexslider'
 });
 });
// ]]></script>
				
			

Основные стили

Создадим основной файл стилей в котором будут прописаны все стили для нашего слайдера, я назвал файл slider.css

Первым делом прописываем сброс стилей, чтобы очистить все поля, отступы и т.д., тем самым сохранив последовательность загрузки кода для всех браузеров.

				
					.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus { outline: none; }
 
.slides,
.flex-control-nav,
.flex-direction-nav {
 margin: 0;
 padding: 0;
 list-style: none;
}
 
.flexslider a img { outline: none; border: none; }
 
.flexslider {
 margin: 0;
 padding: 0;
}
				
			

Идем далее: исключим показ слайдов изображений которые находятся вне основной области просмотра, и настраиваем стили самих слайдов (автомасштабирование и закругленная рамка).

				
					.flexslider .slides > li {
 display: none;
 -webkit-backface-visibility: hidden;
}
 
.flexslider .slides img {
 width: 100%;
 display: block;
 
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}
				
			

Добавляем стиль который «чистит» последующие положения слайдов

				
					.slides:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}
 
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
				
			

Стили для слайдера

Для слайдера мы установим цвет фона — белый и добавим небольшую тень с помощью CSS3 свойства — “box-shadow”. Затем добавим отступы 10px и закруглим углы.

				
					.flexslider {
 position: relative;
 zoom: 1;
 padding: 10px;
 background: #ffffff;
 
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 
 -webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
 -moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
 box-shadow: 0px 1px 1px rgba(0,0,0, .2);
}
				
			

Я установил минимальную и максимальную ширину для слайдера. Вы можете сами настроить параметры под ваши требования.

Параметр zoom устанавливаем 1, это позволит избежать проблем изменения размера в браузерах на мобильных устройствах.

				
					.flex-container {
 min-width: 150px;
 max-width: 960px;
}
.flexslider .slides { zoom: 1; }
				
			

Кнопки навигации

Для кнопок мы добавим зеленый градиент с помощью CSS3, установим параметры ширины, высоты и т.д. Чтобы выровнять кнопки вертикально, мы должны выставить позиции от верхнего поля 50%.

				
					.flex-direction-nav a {
 display: block;
 position: absolute;
 margin: -17px 0 0 0;
 width: 35px;
 height: 35px;
 top: 50%;
 cursor: pointer;
 text-indent: -9999px;
 
 background-color: #82d344;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
 background-image: -webkit-linear-gradient(top, #82d344, #51af34);
 background-image: -moz-linear-gradient(top, #82d344, #51af34);
 background-image: -o-linear-gradient(top, #82d344, #51af34);
 background-image: linear-gradient(to bottom, #82d344, #51af34);
}
				
			

Добавляем изображения стрелок с помощью псевдо-селекторов “:before” и “:after”. Исходники всех изображений используемых в уроке находятся в архиве в папке img. Вы можете поменять изображения на свое усмотрение.

				
					.flex-direction-nav a:before {
 display: block;
 position: absolute;
 content: '';
 width: 9px;
 height: 13px;
 top: 11px;
 left: 11px;
 background: url(../img/arrows.png) no-repeat;
}
 
.flex-direction-nav a:after {
 display: block;
 position: absolute;
 content: '';
 width: 0;
 height: 0;
 top: 35px;
}
				
			

Добавим небольшой 3D эффект к кнопкам в виде ленты (кнопки уходят на задний план за слайдер).

				
					.flex-direction-nav .flex-next {
 right: -5px;
 
 -webkit-border-radius: 3px 0 0 3px;
 -moz-border-radius: 3px 0 0 3px;
 border-radius: 3px 0 0 3px;
}
 
.flex-direction-nav .flex-prev {
 left: -5px;
 
 -webkit-border-radius: 0 3px 3px 0;
 -moz-border-radius: 0 3px 3px 0;
 border-radius: 0 3px 3px 0;
}
 
.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }
.flex-direction-nav .flex-prev:before { background-position: 0 0; }
 
.flex-direction-nav .flex-next:after {
 right: 0;
 border-bottom: 5px solid transparent;
 border-left: 5px solid #31611e;
}
 
.flex-direction-nav .flex-prev:after {
 left: 0;
 border-bottom: 5px solid transparent;
 border-right: 5px solid #31611e;
}
				
			

Кнопки управления под слайдером

Создаем блок с маленькими круглыми кнопками в нижней части слайдера с помощью которых можно будет переключать слайды в не зависимости их порядка.

				
					.flexslider .flex-control-nav {
 position: absolute;
 width: 100%;
 bottom: -40px;
 text-align: center;
 margin: 0 0 0 -10px;
}
 
.flex-control-nav li {
 display: inline-block;
 zoom: 1;
}
 
.flex-control-paging li a {
 display: block;
 cursor: pointer;
 text-indent: -9999px;
 width: 12px;
 height: 12px;
 margin: 0 3px;
 background-color: #b6b6b6 ;
 
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 
 -webkit-box-shadow: inset 0 0 0 2px #b6b6b6;
 -moz-box-shadow: inset 0 0 0 2px #b6b6b6;
 box-shadow: inset 0 0 0 2px #b6b6b6;
}
 
.flex-control-paging li a.flex-active {
 background-color: #82d344;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
 background-image: -webkit-linear-gradient(top, #82d344, #51af34);
 background-image: -moz-linear-gradient(top, #82d344, #51af34);
 background-image: -o-linear-gradient(top, #82d344, #51af34);
 background-image: linear-gradient(to bottom, #82d344, #51af34);
 
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
}
				
			

Подписи к изображениям

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

				
					.flexslider .slides p {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 5px;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 20px;
    color: white;
    background-color: #222222;
    background: rgba(0,0,0, .9);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
				
			

Заключение

На этом урок закончен. Я надеюсь этот урок был полезен и вы узнали что-то новое. Вы можете использовать такой слайдер в любых ваших проектах, его легко настроить и использовать при этом нагрузка на ресурс минимальна.

Свежие записи
Команда RD

Команда RD и RMDIR позволяют удалять как каталоги, так и

Web-Дизайн
help2site
Файл robots.txt., who you are?

Оглавление Файл robots.txt и его написание. Файл robots.txt необходим для любого вэб-ресурса, так как с его помощью осуществляется управление над всеми поисковыми системами (роботами), в чем,

Web-Дизайн
help2site
Защита от спама для любого сайта (JavaScript)

Cегодня мы поговорим про насущную проблему «СПАМ».  Способ решения данной проблемы позволит избавиться от спама на форме обратной связи, спам на комментарии или же спам на заказы в интернет магазине. Хотелось

Программы
help2site
Бесплатные приложения для ipad mini

Сегодня я желаю вам рассказать немного про Бесплатные приложения на ipad . Многие сайты выкладывают данные приложения в итоге при загрузке они требуют активации, и у меня

Web-Дизайн
help2site
Бизнес сайт на wordpress

Сайт на wordpress: юзабилити & некоторые «фишечки». Бизнес сайт на wordpress для заработка в сети интернет – это … Даже если вы не интернет-предприниматель и

Оборудование
help2site
Материнская плата

Эта плата, та основа с помощью которой объединяются и совместно функционируют остальные комплектующие (части) компьютера. Слот PCI — используется для подключения различных плат, таких как

Аndroid
help2site
SetCPU — управление частотой процессора

Данная программа позволяет управлять частотой процессор на устройстве Android, с целью увеличения времени работы батареи и производительностью. Она не разгоняет процессор, а только управляет им. В