Автор

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

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


 

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

 

ДЕМО
ИСХОДНИКИ

 

В данном уроке мы рассмотрим как создать простой но при этом адаптивный слайдер изображений для сайта. Для создания подобного слайдера нам понадобится плагин FlexSlider все остальное мы оформим с помощью стилей CSS3. И так, давайте приступим. 

Шаг 1. HTML

Как всегда мы начинаем с разметки, для этого мы создадим <div> с классом “flex-container”, далее внутри этого мы добавим еще один <div> с классом “flex-slider”, все это мы оформляем в неупорядоченный список, вот что получилось.

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

Подпись к изображению</li>
</ul>
</div>
</div>

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

<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>

Все настройки плагина смотрим по ссылке указанной выше. После того как с разметкой мы закончили, мы переходим к следующему шагу.

Шаг 2. 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;
}

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

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

Я установил минимальную и максимальную ширину для слайдера. Возможно, вам придется изменить или удалить этот параметр при реализации Вашего проекта. Мы установим масштаб на значении к 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" псевдо-селектора. Этот псевдо-селектор позволяет включить некоторыей контент без добавления новых тегов в HTML.

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

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

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

Теперь добавим маленькую навигацию в низу слайдов, которые позволяют щелкнуть на нужном слайде. Создадим круги с помощью "border-radius" и "box-shadow" собственность.

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

 

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

Вот и все. Готово!

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

Все популярней становятся сайты, в котором реализованы интерактивные фоны, зачастую это анимацию, какие-то не значительные эффекты, ранее ресурсы не всем позволяли просматривать "тяжелые" сайты, но сейчас прогресс не стоит на месте и интернет и мобильные устройства идут почти в ногу со своими дестктопными товарищами. Все мы знаем, что такие мобильные устройства на iOS и Windows Phone не поддерживают просмотр видео реализованных с помощью flash проигрывателя, но они прекрасно работают с HTML5.


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

На некоторых сайтах вы, наверное, не разе замечали так называемые «Хлебные крошки», которые сохраняют путь пройденного вами пути на сайте. Это достаточно удобно, ведь позволяет быстро вернуться в необходимый раздел сайта. Но зачастую такие крошки достаточно не приметные, и пользователь не обращает на них внимание, при этот данный элемент на сайте теряет свою значимость. В данном уроке мы рассмотрим как стилизовать данные следы на сайте, чтобы они отлично привлекали взор посетителя и при этом выполняли свое задание.


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

Еще один красивый фон для сайта, и в данном уроке мы рассмотрим еще один замечательный пример реализации объемного фона. Идея состоит в построении сетки из кубиков, которые будут двигаться в бесконечном цикле, при этом постепенно изменяя угол вращение и блика на них, что будет создавать масштабный эффект, такой эффект отлично подойдет для портфолио или заглушки для сайта. Такой фон явно не оставит равнодушным Ваших посетителей.


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

На сайтах, в основном, можно встретить вывод подписей для изображений, которые содержат различную информацию о материале. Зачастую эти, так называемые, подсказки весьма скучны и не привлекают взор пользователя к необходимой информации под изображением, но эту, пускай не такую уж и большую проблему, можно весьма просто решить с помощью маленького плагина jQuery. Плагин Drop Caption берет содержание атрибута изображения title и делает из него подпись, которая появляется только при наведении курсора мыши на картинку.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close