—»     —»   Разработка слайдера изображений при помощи jQuery и CSS3
  Раздел: Руководства   Нет комментариев  

Разработка слайдера изображений при помощи jQuery и CSS3

В нашем сегодняшнем руководстве мы займемся разработкой слайдера посредством jQuery-скрипта «Nivo Slider» и CSS3. Данный скрипт предоставляет нам 16 эффектов перехода, он простой, гибкий и дополнительно оснащен множеством функций. Вы можете использовать его практически везде, для любого типа проектов, включая личные и коммерческие веб-сайты и шаблоны, разработкой которых вы занимаетесь. Сегодня мы разработаем код для слайдера изображений, который вы можете видеть в Futurico UI Pro, созданный Владимиром Кудиновым.

Разработка слайдера изображений при помощи jQuery и CSS3

Сложность: средняя Время на выполнение: 30 минут

Этап 1 – Основная HTML-разметка

Для начала вам нужно скачать Nivo Slider. Из этого архива вам понадобятся 2 файла: «nivo-slider.css» и «jquery.nivo.slider.pack.js».

Затем необходимо создать основную HTML-разметку и добавить туда JS-файл, а также файл CSS из «Nivo Slider». Вам также понадобится ссылка на последнюю версию jQuery-библиотеки, размещенную системой Google (хотя у вас есть возможность разместить её на собственном сервере по желанию).

<html lang="en">
<head>
<meta charset="utf-8">
<title>Slider Tutorial</title>
<link rel="stylesheet" href="css/nivo-slider.css" media="screen">
</head>

<body>

<!-- jQuery & Nivo Slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>

</body>
</html>

Чтобы загрузить Nivo Slider, нам нужно добавить несколько строчек кода перед закрывающим тэгом «body». А также требуется выставить некоторые опции для того, чтобы отобразить контроллеры, изменить уровень плотности отображения заголовка, а также заменить текстовые ссылки «вперед-назад» на стрелочки. Полный список опций вы можете увидеть здесь.

<script>
$(window).load(function() {
$('#slider').nivoSlider({
directionNavHide: false,
captionOpacity: 1,
prevText: '<',
nextText: '>'
});
});
</script>

Этап 2 – HTML-разметка слайдера

Для начала нам потребуется создать div с классом 'slider-wrapper' и 'futurico-theme'. Затем создайте div с id 'slider' и классом 'nivoSlider'. Для каждого слайда мы создадим «img».

<div class="slider-wrapper futurico-theme">

<div id="slider" class="nivoSlider">

<img src="img/slide1.png" alt="">

<img src="img/slide2.png" alt="">

<img src="img/slide3.png" alt="">

<img src="img/slide4.png" alt="">

</div>

</div>

Этап 3 – Разметка слайдера

Нам нужно создать слайдер, ширина которого будет составлять 300 пикселей, а высота 180. Так как мы собираемся добавить отступы толщиной в 5 пикселей, нам следует вычесть по 10 пикселей как из высоты, так и из ширины. Мы также выставим цвет фона и сделаем углы закругленными.

.futurico-theme.slider-wrapper {
position: relative;
width: 290px;
height: 170px;
margin: 0;
padding: 5px;

background: #141517;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.futurico-theme .nivoSlider {
position: relative;
width: 290px;
height: 170px;
}

.futurico-theme .nivoSlider img {
display: none;
position: absolute;
width: 290px;
height: 170px;
top: 0;
left: 0;
}

Разработка слайдера изображений при помощи jQuery и CSS3

Этап 4 – Управление слайдером

Теперь нам нужно оформить кнопки управления слайдером. Начнем с того, что расположим кнопки управления в самом низу и центрируем их. Если у вас будет больше 4 слайдов, то вам нужно будет изменить значение «left» для того, чтобы центрировать кнопки управления.

.futurico-theme .nivo-controlNav {
position: absolute;
bottom: -30px;
left: 105px;
}

Для каждого слайда мы создадим окружность. Для того чтобы оформить её, мы добавляем цвет фона, тени и закругляем углы до такой степени, чтобы получить окружность. Для того чтобы скрыть нумерацию, мы добавляем параметр text-indent с отрицательным значением.

.futurico-theme .nivo-controlNav a {
display: block;
float: left;
width: 16px;
height: 16px;
margin-right: 5px;
text-indent: -9999px;

background: #141517;

-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;

-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
}

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

.futurico-theme .nivo-controlNav a.active,
.futurico-theme .nivo-caption span {
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

-webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
-moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
}

Разработка слайдера изображений при помощи jQuery и CSS3

Этап 5 – Следующий и предыдущий слайды

Для того чтобы оформить кнопки переключения к следующему или предыдущему слайду, мы выравниваем их по центру и добавляем основные CSS-стили (font-family, font-size, color и т.д.).

.futurico-theme .nivo-directionNav a {
display: block;
top: 60px;

font-family: 'Consolas', sans-serif;
font-size: 40px;
color: #141517;
text-shadow: 0px 1px 1px rgba(255,255,255, .05);
}

.futurico-theme a.nivo-prevNav { left: -40px; }

.futurico-theme a.nivo-nextNav { right: -40px; }

Разработка слайдера изображений при помощи jQuery и CSS3

Этап 6 – HTML-разметка заголовков

Для того чтобы создать заголовки, нам нужно создать div с классом 'nivo-html-caption' и произвольным id. Для того чтобы связать заголовок с соответствующим слайдом, просто добавьте элементу «img» параметр title с тем же именем, что и id заголовка.

<div id="slider" class="nivoSlider">

<img src="img/slide1.png" alt="" title="#caption1">

<img src="img/slide2.png" alt="">

<img src="img/slide3.png" alt="" title="#caption3">

<img src="img/slide4.png" alt="">

</div>

<div id="caption1" class="nivo-html-caption">
<strong>New Project</strong> <span></span> <em>Some description here</em>.
</div>

<div id="caption3" class="nivo-html-caption">
<strong>Image 3</strong> <span></span> <em>Some description here</em>.
</div>

Разработка слайдера изображений при помощи jQuery и CSS3

Этап 7 – Оформление заголовков

Для того чтобы оформить заголовки, мы изменяем цвет текста, сам шрифт и его размер. Здесь мы так же будем использовать зеленую градацию, которую уже использовали ранее.

.futurico-theme .nivo-caption {
padding: 5px 0;

font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #e1e1e1;

background: #000000;

-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

.futurico-theme .nivo-caption span {
display: inline-block;
width: 5px;
height: 5px;
margin: 0 5px 1px 5px;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.futurico-theme .nivo-caption em {
font-family: Georgia, sans-serif;
font-size: 11px;
color: #727581;
}

Разработка слайдера изображений при помощи jQuery и CSS3

В завершение

И на этом всё! Мы закончили разработку полноценного привлекательного слайдера. В нашем сегодняшнем руководстве мы сосредоточились на оформлении слайдера, а скрипт «Nivo Slider» позаботился о его функциональной составляющей. Не забудьте прокомментировать нашу сегодняшнюю разработку.

* Смотреть демо
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: слайд-шоу, jQuery, CSS
Опубликовал Design FactoRy   Прочитано (раз): 12708   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Phoenix miner
Phoenix miner
miner.download
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
генератор сухого тумана
Термальный фоггер Бургесс Thermo-Fogger. Инструкция по применению.
dezfog.ru
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031