Слайдеры для сайтов: виды и способы установки

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

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

-для-сайта-500x355 Слайдеры для сайтов: виды и способы установки

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

-изображений-500x230 Слайдеры для сайтов: виды и способы установки

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

-новостей-500x156 Слайдеры для сайтов: виды и способы установки

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

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

Его задачи:

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

-для-сайта-500x359 Слайдеры для сайтов: виды и способы установки

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

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

-аккордеон Слайдеры для сайтов: виды и способы установки

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

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

-на-jQuery-500x246 Слайдеры для сайтов: виды и способы установки

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

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

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

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

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

-укоз1-500x261 Слайдеры для сайтов: виды и способы установки

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

-укоз2-500x276 Слайдеры для сайтов: виды и способы установки

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

-укоз3-500x151 Слайдеры для сайтов: виды и способы установки

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

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

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

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

1-500x154 Слайдеры для сайтов: виды и способы установки

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

2-500x300 Слайдеры для сайтов: виды и способы установки

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

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

3-500x254 Слайдеры для сайтов: виды и способы установки

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

4 Слайдеры для сайтов: виды и способы установки

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

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

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

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

-сделать-слайдер-500x290 Слайдеры для сайтов: виды и способы установки

Установить скачанный скрипт элементарно: нужно распаковать архив в корень сайта, прописать правильные пути к файлам 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.

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

-слайдер-для-сайта-500x225 Слайдеры для сайтов: виды и способы установки

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

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

-картинок-для-сайта-500x361 Слайдеры для сайтов: виды и способы установки

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

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

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

-500x300 Слайдеры для сайтов: виды и способы установки

Комментировать

КОММЕНТАРИИ

13.02.13 Ответить
Ara:

Отличные слайдеры для сайта, спасибо за решения

13.02.13 Ответить
Контра:

Пробую ставить разные варианты, то не работает, то верстка всплывает. Не везет прям.
Попробую ваш «самый простой слайдер», надеюсь хоть он пойдет

13.02.13 Ответить
Ucozer:

Даже не знал, что бывают слайдеры для ucoz, этого говносервиса )

10.04.13 Ответить
костя:

как им пользоватся устонавливать

10.04.13 Ответить
Wildo:

Костя, в статье все подробно описано.

08.05.13 Ответить
Владимир:

Привет, хочу реализовать как тут http://www.bertling.com/ . что можете посоветовать

25.09.13 Ответить
uCozCreator:

@Ucozer: Если у тебя не хватает мозгов разобраться в чем-то, то не стоит называть это говном. Говно в данном случае ты, чувачок!

26.09.13 Ответить
Владимир:

@uCozCreator: дело не в том, что кто-то не разобрался, а просто не считают достойным связываться с этим сервисом. поддерживаю Ucozer’a

10.10.13 Ответить
ShutDown:

@uCozCreator: не смеши, в Укозе разбираться… в чём там разбираться? или ты из тех кто к нулям дописывает единичку при оценке укоза? очнись ни один достойный проект никогда не лежал и не будет лежать на укозе
а выделываться «чувачок» будешь перед бабушками и домохозяйками и рассказывать какой укоз офигенный

21.12.13 Ответить
Анна:

@ShutDown: Вы правы!

25.02.14 Ответить
Игорь:

Подскажите. Самый простейший слайдер — картинки переключающиеся стрелками, без излишеств.

05.03.14 Ответить
Евгений:

Большое спасибо за слайдер для вордпреса! Очень помог!

20.10.14 Ответить
Валентинович:

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

29.10.14 Ответить
Ваше имя:

Валентинович, здесь тебе не помогут)

30.03.15 Ответить
Усладъ:

Какие форматы подерживает слайдер?

23.07.15 Ответить
хуйло:

че блядь за хуйня?где скрипты и где сама верстка?на кой хуй мне примеры слайдеров на джепегах,на примере только самый простой

27.08.15 Ответить
максим:

Только ссылок нету на то как это реализоаать , на планшете не отображается ссылка