—»     —»   Адаптивный слайдер изображений на jQuery и CSS3
  Раздел: Руководства   Комментариев: 2  

Адаптивный слайдер изображений на jQuery и CSS3



Сегодня мы займемся разработкой адаптивного слайдера изображений из Impressionist UI. Функционал будет организован при помощи плагина FlexSlider, а стилизация выполнена посредством CSS3. Мы надеемся, что вам понравится это руководство, и вы найдете ему применение в собственных проектах! Давайте приступим.

Адаптивный слайдер изображений на jQuery и CSS3

Этап 1 – Разметка

HTML-разметка слайдера очень простая. Мы создадим «div» с классом flex-container, затем внутри этого «div» мы добавим еще один класс flex-slider – в этом div’е будут расположены контроллеры слайдера. В довершение мы создаем неупорядоченный список для того, чтобы добавить все слайды. Каждый слайд должен быть внутри элемента списка.

<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<a href="#"><img src="img/slide1.jpg" /></a>
</li>

<li>
<img src="img/slide2.jpg" />
</li>

<li>
<img src="img/slide3.jpg" />
<p>Designing The Well-Tempered Web</p>
</li>
</ul>
</div>
</div>

Далее мы интегрируем библиотеку jQuery и плагин FlexSlider. Чтобы загрузить слайдер, нам нужно внести следующий код, в котором вы можете регулировать настройки.

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

Этап 2 – Основные стили

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

.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%; }

Этап 3 – Стили контейнера

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

.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; }

Этап 4 – Стрелки вперед и назад

Что касается кнопок вперед и назад, то здесь мы добавим зеленый 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. Этот псевдо-селектор позволяет нам включать контент без добавления нового тэга в HMTL-код. Чтобы добиться эффекта ленты, мы используем трюк с границами, который довольно просто создает формы при помощи только лишь кода CSS. Эти формы также будут включены при помощи псевдо-селектора :after.

.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;
}

Для того чтобы закончить работу над кнопками, нам нужно добавить закругленные углы, расположить их с правой и с левой стороны, и добавить «треугольники», которые создадут ленточный эффект.

.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;
}

Этап 5 – Контроллеры слайдера

Контроллеры слайдера представляют собой маленькие окружности на слайдере, которые позволяют вам кликать по слайдам. Мы расположим этот контейнер в самом низу слайдера. Затем мы создадим окружности при помощи параметров border-radius и box-shadow. Что касается окружности активного слайда, здесь мы исключим тень и добавим тот же CSS3-градиент, который использовали при создании кнопок.

.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;
}

Этап 6 – Подписи

Мы почти закончили! Осталось добавить простенькие стили для подписей. Выставите цвет фона на черный с небольшой прозрачностью при помощи режима цвета 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;
}

* Смотреть демо
Внимание! У вас нет прав для просмотра скрытого текста.


Завершение

На этом мы заканчиваем наше руководство. Надеемся, что вам понравился этот пример, и вы научились чему-то новому. Вы можете свободно использовать этот слайдер в своих проектах или на собственном веб-сайте. Не забывайте следить за обновлениями на нашем сайте, у нас всегда качественные уроки!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 9367   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 14 января 2013 @ 01:46
Написал: Юрий — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
И вот еще одна очень интересная и оригинальная адаптивная галерея «liChaos» http://masscode.ru/index.php/k2/item/50-lichaos
Комментарий #2: 14 января 2013 @ 15:25
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Юрий, да, нетипично и красиво!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Самокат детский трехколесный scooter купить ggsport.ru
ggsport.ru
Ремонт ходовой ваз 2115 своими руками avtochining.ru
avtochining.ru
аккумулятор lg G4 H818
accutel.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2018    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031