Как сделать адаптивный (резиновый) слайдер изображений с помощью 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="" src="img/slide1.jpg" /></a></li>
<li><img decoding="async" alt="" src="img/slide2.jpg" /></li>
<li><img decoding="async" alt="" src="img/slide3.jpg" />
 
Попробуйте изменить размер окна</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 \9;
 
 -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 позволяют удалять как каталоги, так и

iOS
help2site
Программы для ipad 5

Любое устройство предназначено для работы с ним, но не каждое из них оснащено программным обеспечение после покупки, так это например iPad 5. Но это не

Оборудование
help2site
Как включить все ядра процессора

Большинство продвинутых пользователей персональных компьютеров знают, что в Windows 7 по умолчанию используется всего одно ядро процессора и для того чтобы задействовать все ядра нужно

Web-Дизайн
help2site
Расчёт расстояния при помощи API Карт Яндекс

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

Windows
help2site
Правильная установка Windows 10

Вы решили обновиться до Windows 10 или установить эту операционную систему с нуля? В таком случае следует более подробно рассмотреть данный процесс. Если говорить о

Интернет
help2site
Вежливость в интернете и успех в бизнесе

Вежливость – залог успеха. Вежливость – слово, которое я вынес в заголовок этой статьи, я бы посоветовал всем пользователям всемирной паутины (и не только тем,

Оборудование
help2site
Как выбрать мощность блока питания для ПК

Пошаговая инструкция как выбрать мощность блока питания под определённый компьютер. Поможет сэкономить деньги и нервы. Мощность блока питания компьютера — основа выдержки производительности Подавляющее большинство

Web-Дизайн
help2site
PHP if-else. Условия в PHP.

В прошлый раз я писал о существующих типах операторов в PHP. Этот пост начинает серию связанных заметок об управляющих структурах (условия, циклы и т.д.) в PHP.