Автор

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

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

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


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

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.


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

Я уже публиковал урок «Нестандартные Checkbox (RadioButton) без использования JavaScript». Прекрасные кнопочки, но там используются картинки!!! В данном примере используется только CSS. Всё очень просто вы вставляете код в свой стиль и получаете стильные, а именно на мой взгляд, в современном стиле кнопки.


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

Экспериментальная полноэкранная навигация, анимированная с использованием CSS и jQuery, которая расширяется в пределах круга.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close