Сложность: средняя Время на выполнение: 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;
}
Этап 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);
}
Этап 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; }
Этап 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>
Этап 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;
}
В завершение
И на этом всё! Мы закончили разработку полноценного привлекательного слайдера. В нашем сегодняшнем руководстве мы сосредоточились на оформлении слайдера, а скрипт «Nivo Slider» позаботился о его функциональной составляющей. Не забудьте прокомментировать нашу сегодняшнюю разработку.
* Смотреть демо
Внимание! У вас нет прав для просмотра скрытого текста.