В этой публикации давайте поговорим на тему слайдеров. Эти элементы сайтов из дизайнерской роскоши перерастают в повседневную необходимость — они функциональны, информативны, легки в установке. Итак, что же мы называем слайдером?

Слайдер — это определенный ширины блок, занимающий часть веб-страницы, либо же всю ее целиком. Основная его особенность — динамически изменяющийся в автоматическом или ручном режиме контент. Это могут быть как фотографии (изображения, картинки), так и ссылки на текстовую информацию. Таким образом, различают два основных типа слайдеров: изображений (картинок) и новостей.

В стандартном слайдере изображений чаще всего выводится от трех до пяти картинок, меняющихся с определенной периодичностью. Обычно слайдеры работают в ручном режиме: смена картинок происходит после нажатия на переключатель (ползунок). При этом предыдущее изображение скрывается. Смена слайдов может быть разнообразной: от вышеназванного элементарного исчезновения до смещения за пределы видимости. Разными могут быть и переключатели: от ползунков до стрелок и кнопок.

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

Возможности современных слайдеров

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

Его задачи:

• ссылки на ключевой контент уместить в пределах экрана;
• соблюсти баланс между графической составляющей и правилами SEO-оптимизации;
• удовлетворить все пожелания целевой аудитории сайта (и собственников ресурса, естественно).

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

Современные технологии позволяют безгранично расширить функционал слайдера — в зависимости от потребностей и направления ресурса. Во-первых, могут применяться разные способы смены картинок — от классического до так называемого «аккордеона» и т.п. Вместо картинки или текста на слайде может быть флэш-ролик. Также есть возможность оборудовать слайдеры таймером, поставить кнопки паузы и запуска слайд-шоу и т.п.

Делаем слайдер на html

Слайдеры реализуются на основе технологии JavaScript. В основе каждого слайдера — html-код. Современные слайдеры чаще всего создаются с применением библиотеки JavaScript jQuery. Она содержит большое количество стандартизированных объектов для создания слайдеров различного типа, формы и наполнения. Зачастую пользователям, частично владеющим основами создания сайтов, многие бесплатные ресурсы предлагают уже сформированные шаблоны слайдеров. Писать код и вникать в функции уже не приходится — достаточно лишь скопировать исходник шаблона в html-код своего сайта.

Минус таких библиотек — низкая функциональность слайдеров. В задачу шаблонов не входит учет всех интересов владельца ресурса. Поэтому, если нужен оригинальный слайдер — придется создавать его вручную. В этом еще один плюс — конечный файл в html весит в сто (!) раз меньше слайдера, созданного на основе библиотеки jQuery. Это, несомненно, скажется на быстродействии элемента сайта.

Слайдер для сайта на ucoz

Ресурс ucoz.net имеет ряд функциональных преимуществ для создания и добавления слайдеров на сайты системы. В основном, это будут слайдеры на основе библиотеки jQuery — она автоматически подключена на всех ресурсах ucoz.net (того требует само функционирование системы — многие функции реализованы с помощью этой библиотеки).

Ucoz.net предлагает пользователям три стандартизированных варианта слайдеров. Их установка пошагово расписана в разделе инструкций для пользователей.

Первый слайдер — самый простой и универсальный. Картинка с подписью, и внизу — кнопки для переключения слайдов.

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

Третий вид слайдера не для новичков. Универсальный, стильный, он может работать как в ручном, так и в автоматическом режимах. Подходит для всех типов сайтов. Кроме того, он совместим со многими распространенными браузерами — новых версий, естественно.

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

Скрипт слайдера

Слайдер сам по себе является скриптом, основное предназначение которого — смена картинок. Стандартные скрипты слайдеров, как уже говорилось, можно скачать на многих бесплатных и платных ресурсах (например, на http://jqscript.com/tag/skachat-slajder-na-jquery). Не все они легки в применении — большинство рассчитано на продвинутых веб-дизайнеров.

Зато и сами слайдеры получаются оригинальными и стильными.

Или же весьма нестандартными. Но при этом интересными.

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

Например, это элементарный плагин Coin Slider. Он не требует специальных знаний для установки. Но зато и по функционалу довольно простой.

А вот Slideshow Gallery позволяет создавать слайдеры с превью. Если кликнуть на картинку, она автоматически увеличится.

Как сделать качественный слайдер

Как уже говорилось, удобнее всего создавать слайды на основе ресурсов библиотеки jQuery. Но можно поступить проще, применив шаблонный код, который при необходимости можно лишь немного подкорректировать. Но есть и еще более простой путь: найти уже заранее разработанные шаблонные скрипты для слайдеров, вставить в них свои картинки и разместить на сайте.

Например, много интересных решений слайдеров доступны для бесплатного скачивания здесь: http://bayguzin.ru/main/skriptyi/slajderyi.html.

Рассмотрим установку самого элементарного слайдера.

Установить скачанный скрипт элементарно: нужно распаковать архив в корень сайта, прописать правильные пути к файлам css и js и, скопировав код html из файла index.html, вставить его между тэгами <body> и </body>.

Плагин ContentSlide

В виду распространенности платформы WordPress, стоит рассмотреть, как сделать слайдер на сайте или блоге с помощью плагина Content Slide. Скачать его можно по ссылке http://wordpress.org/extend/plugins/content-slide/.

После скачивания плагина нужно распаковать архив, скопировать папку content slide в /wp-content/plugins/.

В административной панели блога следует активировать плагин, зайдя на одноименную вкладку. Он создаст собственное меню под названием Content Slide. В его настройках три блока — General Settings (размеры картинок, их описания и подписи), Effects & Animations Settings (анимация, различные эффекты появления слайдов, настройка навигационного меню) и Images Source Settings (указывается количество картинок и их источник).

Для вставки настроенного слайдера на главную страницу сайта необходимо скопировать в нужный файл такой код:

<?php

if(is_front_page()) {

        if(function_exists('wp_content_slider')) { wp_content_slider(); }

} ?>

Итоговый результат будет примерно таким:

Самый простой слайдер

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

Для установки простого слайдера на необходимую страницу, предварительно нужно установить в head стиль и скрипты из библиотеки jquery. Один из примеров срипта для такого слайдера — на сайте http://ucozon.ru/dir/11-1-0-5556.

А вот и пример простого слайдера

Оригинальный слайдер картинок

Слайдеры картинок удобно использовать в разделах фотогалерей, на сайтах интернет-магазинов для подробного описания услуг и товаров. Готовые плагины таких слайдеров насыщены дополнительными функциями — огромным выбором вариаций размеров слайдов, переключателей, видов анимации. Из-за этого они достаточно емкие, а, учитывая, что многие функции попросту не нужны, это создает дополнительный «балласт» при работе сайта.

Поэтому профессиональные верстальщики предпочитают самостоятельное создание слайдеров в зависимости от потребностей ресурса. Это, конечно, не бесплатно, но зато работа сайта будет максимально оптимизированной.

Установка слайдера

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