Автор

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

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


 

Сейчас широко распространенные девайсы с различным разрешением экрана, по этому приходится прибегать к адаптивности. В сегодняшнем уроке мы вернемся с чего начинали, а именно с простейшего дизайна, мы рассмотрим как можно создать простейший адаптивный слайдер для сайта использую минимальные навыки и минимум кода. Нам понадобится несколько изображений и небольшой скрипт с репозитория 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);

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


vk.com/club.ssdru

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


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

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

Представление мини-библиотеки экспериментальных эффектов прокрутки страницы.


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

Отзывчивый фрагмент тура с пошаговым руководством, чтобы помочь пользователям понять, как использовать ваш сайт.


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

В данном уроке мы сделаем отличный слайдер CSS3. Он будет использовать эффект затухания между слайдами. Дополнительно можно использовать описание для каждого изображения. Для организации информации будет использоваться неупорядоченный список. Слайды будут переключаться автоматически с помощью анимаций CSS3.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close