Простой адаптивный слайдер с помощью jQuery

jQuery 27.04.2013

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

ДЕМО

ИСХОДНИКИ

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

Шаг 1. HTML

У нас будет ID за которым закреплены будут элементарные стили, мы подключаем изображения и подписи к ним:

<section id="fader">
 <img src="01.jpg" alt="Image One">
 <img src="02.jpg" alt="Image Two">
 <img src="03.jpg" alt="Image Three">
 <img src="04.jpg" alt="Image Four">
 <img src="05.jpg" alt="Image Five">
 <img src="06.jpg" alt="Image Six">
</section>

С разметкой никаких проблем не должно быть, переходим к следующему шагу.

Шаг 2. CSS

Нам необходимо определить позиционирование слайдера и его адаптивность, для самой коробки слайдера мы установим значение position: relative; Это значение означает положение элемента, которое устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

#fader {
 position: relative;
 width: 90%;
 max-width: 600px;
 margin: 0 auto;
 top: 20px;
}

#fader img {
 position: absolute;
 background-color: #f3f4ef; border: 1px solid #dedede; padding: 5px;
 top: 0;
 left: 0;
 max-width: 100%;
 height: auto;
}

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

Шаг 3. jQuery

Нам необходимо иметь автоматический слайдер с базовыми эффектами переходов. Кроме этого мы зададим интервал и скорость автоматического перехода, следует заметить, что он будет цикличным:

jQuery('#fader img:gt(0)').hide();

setInterval(function(){
 jQuery('#fader :first-child')
 .fadeTo(500, 0)
 .next('img')
 .fadeTo(500, 1)
 .end()
 .appendTo('#fader');
}, 4000);