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

Тематика урока: JQuery (flexslider) / CSS3
Сложность: средняя
Время выполнения: 30мин.
  Пример работы

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

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

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

Шаг 1 — Разметка структуры HTML

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

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

Попробуйте изменить размер окна</li>
</ul>
</div>
</div>
<pre>

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

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

Шаг 2 — Основные стили

Создадим основной файл стилей в котором будут прописаны все стили для нашего слайдера, я назвал файл 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%; }

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

Я установил минимальную и максимальную ширину для слайдера. Вы можете сами настроить параметры под ваши требования.
Параметр 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” и “: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;
}

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

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

Заключение

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

Оставайтесь с нами! Впереди еще много всего интересного..

С уважением, Меньшиков Антон.

24
Отправить ответ

avatar
12 Цепочка комментария
5 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
12 Авторы комментариев
ПавелАлександрВолков АндрейАнтонYuri Bush Авторы недавних комментариев
  Подписаться  
сначала новые старые по рейтингу
Уведомлять
Анатолий
Гость
Анатолий

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

Антон
Гость
Антон

Пожалуйста. Если хотите изменить количество слайдов (соответственно измениться и кол-во кнопок), редактируем следующий код в html файле:

Попробуйте изменить размер окна

Просто добавляем или удаляем элементы списка.

sofiaiv22
Гость
sofiaiv22

Здравствуйте подскажите пожалуйста как увеличить размер слайдера?

Антон
Гость
Антон

В css файле находим:

.flex-container {
min-width: 150px;
max-width: 960px;

меняем параметр max-width, который отвечает за размер слайдера.

Guest
Гость
Guest

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

sofiaiv22
Гость
sofiaiv22

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

Владимир
Гость
Владимир

Большое спасибо, ваш материал очень помог!

Антон
Гость
Антон

Пожалуйста! Будут вопросы, обращайтесь.

Алик
Гость
Алик

Огромнейшее спасибо. Сэкономили мне время.

nahkar
Гость
nahkar

Здравствуйте Подскажите а как сделать чтобы высота не изменялась при масштабировании а просто обрезалась?? пожалуйста

Sergey Troshin
Гость
Sergey Troshin

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

Антон
Гость
Антон

Спасибо, чтобы убрать кнопки, нужно исключить .flex-direction-nav и все дополнительные селекторы из файла стилей, можно просто закомментировать

Yuri Bush
Гость
Yuri Bush

ссылка на скачивание не работает. поправите пжл

Антон
Гость
Антон

Спасибо, поправил.

Волков Андрей
Гость
Волков Андрей

Круто! Будут еще уроки? а то у вас только этот один на сайте..

Александр
Гость
Александр

Как отключить автоматическую смену изображений?

Павел
Гость
Павел

То что как раз мне и нужно. Заметил глюк. При запуске странице, картинки сменяются атоматом, но если вручную пролистнуть картинку, то после автоматом уже не листается. Кто-нибудь знает как это решить?

© 2012-2018 Веб-мастерская FREEAMS.ru | Копирование материалов запрещено. // Рекламодателям / Контакты / Карта сайта