18
мар
2015
В данном уроке рассмотрим, как создать адаптивный или как его еще называют «резиновый» слайдер с набором изображений. Адаптивный дизайн становится обязательным для успешного сайта и корректно масштабировать элементы интерфейса должен уметь любой веб-разработчик.
Адаптивный слайдер будет использовать две внешние подключаемые javascript-библиотеки:
1. FlexSlider — быстрый и легкий плагин от программистов компании WooThemes.
2. jQuery — эту популярную библиотеку мы загружаем напрямую из репозитария Google.
Шаг 1. HTML
Приступим к созданию HTML-разметки нашего адаптивного слайдера. Внутри базового div блока с классом «flex-container» поместим еще один div с классом flex-slider, в котором будут находиться код управляющих элементов слайдера. Все изображения слайдов помещаем в элементы упорядоченного HTML-списка.
Теперь подключаем плагин FlexSlider и библиотеку jQuery.
Шаг 2. CSS
Все основные CSS-стили нашего слайдера будут содержаться таблице стилей slider.css.
В первую очередь необходимо сбросить стили и значения отступов, полей и других CSS-элементов. Это обязательное условие для последовательной обработки HTML-кода в любых браузерах.
Теперь нам необходимо выключить отображение изображений, находящихся за основной областью просмотра и настроить стили для автоматического масштабирования и закругленные концы рамки.
Укажем стиль, который будет «очищать» все последующие положения изображений-слайдов.
Шаг №3 Цвета и тень для слайдера
Фоновый цветом по умолчанию будет белый, и добавляем дополнительную тень используя CSS3-селектор “box-shadow”. Все отступы размером 10px и закругляем углы.
В примере заданы значения минимальной и максимальной ширины слайдера. Эти значения могут быть изменены для точной подгонки размера под требования сайта. Для корректного масштабирования в мобильных браузерах задаем параметр zoom равным 1.
Шаг №4 Кнопки навигации по слайдеру
С помощью стилей CSS3 установим кнопкам зеленый фон, а также размеры по ширине и высоте. Для вертикального выравнивания задаем их позицию на расстоянии 50% от верхней границы слайдера.
Используя псевдоселекторы “:after”и “:before” добавим изображения стрелок. Исходные графические файлы с элементами слайдера поместим в каталог img. Вы можете отредактировать изображения для изменения внешнего вида.
Добавляем немного 3D-эффекта как отдельную ленту для кнопок, которые будут скрываться на заднем плане слайдера.
Шаг №5 Кнопки управления слайдами
В нижней части создадим отдельный блок для кнопок прямого перехода на нужное изображение из галереи независимо от их порядка.
Шаг №6 Подписи на изображения
На этом шаге мы добавляем несколько несложных стилей для оформления заголовка в изображениях. Здесь можно дать волю фантазии и настроить цветовую гамму под контент сайта или страницы. В примере мы сделаем черный фон и добавим немного прозрачности с использованием режима RGBA.
Мы создали простой и надежный адаптивный слайдер. Он легко настраивается и модифицируется, не нагружает сервер и может использоваться в любых Интернет-проектах.
Готово!
Адаптивный слайдер для сайта
В данном уроке рассмотрим, как создать адаптивный или как его еще называют «резиновый» слайдер с набором изображений. Адаптивный дизайн становится обязательным для успешного сайта и корректно масштабировать элементы интерфейса должен уметь любой веб-разработчик.
Адаптивный слайдер будет использовать две внешние подключаемые javascript-библиотеки:
1. FlexSlider — быстрый и легкий плагин от программистов компании WooThemes.
2. jQuery — эту популярную библиотеку мы загружаем напрямую из репозитария Google.
Шаг 1. HTML
Приступим к созданию HTML-разметки нашего адаптивного слайдера. Внутри базового div блока с классом «flex-container» поместим еще один div с классом flex-slider, в котором будут находиться код управляющих элементов слайдера. Все изображения слайдов помещаем в элементы упорядоченного HTML-списка.
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<a href="#"><img src="img/slide1.jpg" /></a>
<p>Попробуйте изменить размер окна браузера</p>
</li>
<li>
<img src="img/slide2.jpg" />
<p>Попробуйте изменить размер окна браузера</p>
</li>
<li>
<img src="img/slide3.jpg" />
<p>Попробуйте изменить размер окна браузера</p>
</li>
</ul>
</div>
</div>
<div class="flexslider">
<ul class="slides">
<li>
<a href="#"><img src="img/slide1.jpg" /></a>
<p>Попробуйте изменить размер окна браузера</p>
</li>
<li>
<img src="img/slide2.jpg" />
<p>Попробуйте изменить размер окна браузера</p>
</li>
<li>
<img src="img/slide3.jpg" />
<p>Попробуйте изменить размер окна браузера</p>
</li>
</ul>
</div>
</div>
Теперь подключаем плагин FlexSlider и библиотеку jQuery.
<script type="text/javascript" src="https://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>
<script type="text/javascript">// <![CDATA[
$(document).ready(function () {
$('.flexslider').flexslider({
animation: 'fade',
controlsContainer: '.flexslider'
});
});
// ]]></script>
Шаг 2. CSS
Все основные CSS-стили нашего слайдера будут содержаться таблице стилей slider.css.
В первую очередь необходимо сбросить стили и значения отступов, полей и других CSS-элементов. Это обязательное условие для последовательной обработки HTML-кода в любых браузерах.
.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 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;
}
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%; }
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”. Все отступы размером 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);
}
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; }
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);
}
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);
}
Используя псевдоселекторы “:after”и “:before” добавим изображения стрелок. Исходные графические файлы с элементами слайдера поместим в каталог 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;
}
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;
}
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 Кнопки управления слайдами
В нижней части создадим отдельный блок для кнопок прямого перехода на нужное изображение из галереи независимо от их порядка.
.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;
}
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;
}
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;
}
Мы создали простой и надежный адаптивный слайдер. Он легко настраивается и модифицируется, не нагружает сервер и может использоваться в любых Интернет-проектах.
Готово!
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): SidneyViazy
В новости: vBulletin v5.6.3 Rus Nulled - скрипт форумаHey everyone! Just wanted to drop in and share some thrilling news—I've recently introduced my very own drywall repair company here in gorgeous California! With the sea breeze in the air and the sun radiating down, there's absolutely never been a better time to guarantee your home's walls are in excellent state. Our crew concentrates in coastal properties, so whether you're handling with deterioration and tear from the salty air or demand some skilled repairs after a storm, we've got you protected. Can't anticipate to assist homeowners throughout the coast with their drywall needs! Feel liberated to reach out if you have any questions or need a quote. Let's maintain those walls looking spotless! -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): LouieBen
В новости: Мод mChat 1.2.6 d RUSHi there, like-minded Californians! Eager to reveal the launch of my fresh drywall repair enterprise assisting homes along the coast. Whether you're in San Diego, Los Angeles, or anywhere in between, my team and I are here to tackle all your drywall woes. From minor fixes to major renovations, we've got the competencies and knowledge to take care of it all. Plus, we comprehend the special challenges that come with living near the ocean, so you can count on us to provide answers that last. Give us a yell if you demand any repairs—we're all set to roll up our sleeves and get to work! -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"? -
Написал(а): Escudocu
В новости: YOO Glowbar v March 1, 2024 - Joomla шаблон для сайтов о красоте и модеБлагодарю за шаблон!!! -
Написал(а): sendinfo
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaВиндоус ругается на вирус! Проверьте архив.