Вторник, 17 Июля 2012 10:18

Что такое слайдер

Written by 
Оцени эту запись
(9 Голоса)

На многих современных сайтах используются слайдеры. Слайдер - это блок, в котором некоторый контент изменяется динамически, переключается. В слайдере могут быть картинки (слайдер картинок) или ссылки на новости (новостные слайдеры). 

 

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

 

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

 

Слайдер новостей.

 

В слайдер новостей выносятся картинки, относящиеся к новости, название новости, возможно и краткое описание новости. Название новости является ссылкой на полный текст этой новости. Также может быть кнопка "Читать подробнее", которая тоже перекидывает вас на новость. Переключатели слайдов в ностном слайдере аналогичны переключателям слайдера картинок.

 

Внешний вид слайдера.

 

 

Это слайдер картинок. Есть одна большая картинка (остальные скрыты), стрелочки на предыдущую/следующую картинку, переключатели слайдов (кружки внизу). Переключателей 5 шт, значит в этом слайдере есть 5 картинок и вы можете просмотреть их влубом порядке.

 

 

Это слайдер новостей. Здесь есть большая картинка, навзание новости/статьи, краткое описание или вступление, кнопка READ MORE. В верхнем левом углу вы видите переключатели - стрелочки и кружочки.

 

Как сделать слайдер для своего сайта.

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

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

Если вам интересен этот вариант, предлагаю ознакомиться с такими материалами:

 

Красивый слайдер картинок с интересными эффектами от kate-land

Плагин слайдера новостей от kate-land

Слайдер картинок (описание создания слайдера картинок с разными эффектами анимации)

Простой слайдер новостей (слайдер новостей с превью другого слайдера при наведении на переключатель)

 

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов