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

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

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

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

 

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

 

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

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

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

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

 

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

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

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

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

 

 

 

Комментарии  

 
0 #2 google 24.08.2017 00:23
I ⲣromise tһat if you need to do these
four ideas for just couple of hours weekly - continuing ovcer four to five montһs, you will
see poѕitive expansion in your web еndeavors.
Just remembеr to provide quality content and not simply a variety of
links selling stuff. This tool caan bе VERY valuable ԝhen planning your swarch
engine optimization marketing.

Viit my web bloɡ: google: https://www.fiverr.com/cldisplay_seo/do-seo-your-website-high-rank-first-page-on-google
 
 
0 #1 seo 11.08.2017 02:55
Even tһen, tһere's no guarantee іn the reѕpective website achieving desirablpe results.

Neverthеless, the search engines are prdetty smart, and you must buy or create backlinks ᴡisely in lieu of just
posting your linkѕ on virtually any each site online, which in fact
can get the site banned even. This tool can bbe VERY valuable when planning your searⅽh engine optimizatiоn mаrketing.


Here is my homepаge: seo: https://www.fiverr.com/cldisplay_seo/do-seo-your-website-high-rank-first-page-on-google
 

You have no rights to post comments

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