Создаем свой слайдер для сайта
Если поверхности ресурса катастрофически не хватает, а показать пользователям есть что, то нужно копать вглубь. Или просто прокрутить эту поверхность. В такой ситуации и потребуется слайдер для сайта:
Что такое слайдер
Слайдер представляет собой определенный участок дизайна страницы, на котором в автоматическом, ручном или смешанном режиме происходит смена картинок. Также в качестве содержимого слайдеров для сайта могут выступать текстовый или медийный контент.
В обычный слайдер вшито 5-7 поочередно меняющихся картинок. Чаще всего смена графических объектов инициируется действием пользователя. Встречаются гибридные образцы, сочетающие в себе ручной и автоматический режим переключения.
Слайдеры могут обладать различной структурой пользовательского интерфейса. В качестве переключателей могут использоваться кнопки, ссылки или чекбоксы. Смена картинок может сопровождаться медленным затуханием прозрачности, частичным перекрытием изображений и другими визуальными эффектами:
Особое распространение слайдеры получили на ресурсах, занимающихся интернет-продажами.
С точки зрения психологии, визуальное представление товара в нескольких ракурсах во много раз увеличивает вероятность покупки:
Некоторые специализированные конструкторы сайтов предоставляют пользователям на выбор несколько версий слайдеров для создаваемых шаблонов. Одним из самых популярных сервисов Рунета является ucoz. В зависимости от предназначения ресурса шаблон конструктора комплектуется определенным типом слайдера.
Несколько слайдеров, популярных в сети:
- Tilted Content Slideshow – крутой слайдер, выводящий все изображения в случайном порядке с эффектом 3D анимации:
- Anything Slider – позволяет отображать в своем окне не только картинки, но и видео, транслируемое через проигрыватель:
- Morphing Devices – слайдер с эффектом морфинга изображений. При этом один рисунок медленно перетекает (трансформируется) в другой. Два последних выводимых изображения можно поворачивать:
На чем пишутся слайдеры?
По архитектуре построения слайдер располагается ближе всего к веб-приложению, работа которого осуществляется на клиентской машине. Скрипт слайдера загружается браузером вместе с основным кодом страницы. Стиль может задаваться внутри кода. Но чаще всего характеристики внешнего вида устанавливаются с помощью каскадных таблиц стилей (CSS).
Построение внутреннего механизма слайдера происходит на одном из языков программирования. Чаще всего используется javascript. Для более полного понимания процесса создания слайдера рассмотрим пример его реализации:
<script type="text/javascript">
var locations = new Array("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg" );
var currentImage = 0;
function nextImage() {
currentImage++;
if (currentImage == locations.length)
currentImage = 0;
document.images["picture"].src = locations[currentImage];
return false;
}
</script>
<body>
<img src="img/1.jpg" name="picture" />
<br />
<a href="#" onclick="return nextImage()">Следующее изображение</a>
</body>
Механизм смены изображения в коде этого простого примера задается с помощью javascript. Сначала методом Array () создается новый массив. В скобках задаются элементы массива (изображения). После него идет инициализация глобальной переменной currentImage.
Весь механизм смены изображений внутри слайдера заключен в функции function nextImage(). Внутри ее тела значению переменной currentImage каждый раз после вызова функции прибавляется 1. Затем ее значение сравнивается с длинной массива (locations.length). Если длина массива равняется переменной, то показ изображений начинается с первого элемента.
Строкой скрипта document.images["picture"].src = locations[currentImage] через объектную модель документа происходит обращение к источнику рисунка. Значением currentImage устанавливается, какой из рисунков будет отображен. Перелистывание слайдера осуществляется нажатием на ссылку с помощью события onclick.
Ссылку можно легко поменять на html кнопку:
<input type="button" onclick="return nextImage()" value="Следующее изображение"/>
Более широкими возможностями обладает библиотека jquery. Она включает в себя классы, позволяющие облегчить процесс разработки и увеличить функциональность слайдера.
Вот пример карусели на ее основе. Смена картинок происходит автоматически:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./carousel_files/jquery.min.js"></script>
<style>
#carousel{
width:500px;
height:300px;
overflow-x:hidden;
border: 4px double #33CCFF;
}
#track{
width:2500px;
position:relative;
}
#track div{
width:500px;
height:300px;
float:left;
position:relative;
}
div.red{
background-image:url(img/1.jpg);
}
div.blue{
background-image:url(img/2.jpg);
}
div.yellow{
background-image:url(img/3.jpg);
}
div.green{
background-image:url(img/4.jpg);
}
div.white{
background-image:url(img/5.jpg);
}
</style>
<script type="text/javascript">
$(function(){
var width = $('#track div').width();
function carousel(){
$('#track').delay(1000).animate({right: '+=' + width},1000, function(){
var first = $('#track div:first-child');
first.remove();
$(this).append(first);
$(this).css({right: '-=' + width});
carousel();
});
}
carousel();
});
</script>
</head>
<body>
<div id="carousel">
<div id="track" style="right: 0px;">
<div class="yellow">
</div><div class="green">
</div><div class="red">
</div><div class="blue">
</div><div class="white">
</div>
</div>
</div>
</body>
Карусель изображений – разновидность слайдера, в котором смена изображений происходит автоматически. Дополнительно карусель может иметь ручной режим перелистывания. Чаще всего после загрузки страницы один цикл прокрутки карусели проходит автоматически, а затем происходит переключение в ручной режим работы.
Во всемирной паутине легко найти множество ресурсов, с которых можно скачать уже готовый код продвинутой карусели.
Решение вопроса
Перед тем, как сделать слайдер на сайте, объективно оцените свои возможности. Если практических навыков в веб-программировании явно недостаточно, то лучше пойти по пути меньшего сопротивления. То есть, использовать уже готовое решение.
Рассмотренные в данной статье примеры помогут разобраться в чужом коде, и настроить работу слайдера под свой сайт.