JavaScript слайдеры. Только лучшее

JavaScript слайдеры. Только лучшее

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

Без слайдеров не обходится почти ни одна серьезная веб-разработка. Мы сделали подборку лучших слайдеров из тех, которые доступны бесплатно.

PhatFusion

Весьма простой слайдер, есть возможность вертикального или горизонтального отображения, пошаговое разбитие ленты слайдера. Для работы использует mootools.

phatfusion слайдер

Демо
Скачать
 

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

слайдер js

 

Качественно сделанный слайдер. Реализована доступность без js, управление с клавиатуры, ловит мышиные события, плавные движения ползунка.

слайдер js
Демо
Скачать

 

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

слайдер js

 

Фотослайдер

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

фото слайдер js
Урок
Пример

 

Эпл-стайл слайдер

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

apple слайдер js
Описание
Демо

 

Еще один слайдер, в котором можно указать промежуток.

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

слайдер js
Демо

 

Стандартные слайдеры mootools

mootools слайдер js

 

Coda-слайдер

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

coda слайдер js
Демо
Пост в блоге автора
Скачать

 

jquery мультимедиа-портфолио

Плагин jquery. Автоматически определит тип медиа и применит необходимый плеер.

jquery слайдер js
Демо

TrackBar с двумя ползунками отечественного производства

Очень хорошо сделанный слайдер. Для работы не использует никаких библиотек.

Автор Александр Карпинский.

 

Демо

Скачать

 

Еще один слайдер отечественноно производства.

Аккуратный слайдер. В настоящее время дорос до версии 4.0

трэкбар

 

Основное демо

Спец демо

Скачать

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 18

Eugeny
Интересует тема вертикального скролла с индикацией контента. Видел в студии Темы рабочий пример на js. IntellScroll вроде назывался.
Жека
Вы имеете в виду слайдер на сайте башни «Федерация»?
booka
а еесть ли что-то вроде фотослайдера, только картинки линкуют на страницы и конпки управления по краям нужны
#
booka
ElaSTiC
Последний крайне неплох! Благодарю, отличный обзор.
August
может кого заинтересуют мой слайдер и скроллбар? делал для своего проекта, в частности использовал в сетевых играх (тоже может кого заинтересует). http://august4u.biz/images/chess.jpg на картинке: 4 слайдера: непрерывный (шаг 1) - громкость и 3 дискретных - стиль (два положения), размер (4 положения), скорость (21 положение) скроллбар полупрозрачный (необязательно) на тему сафари, исчезает если убрать мышку. все реализовано на чистом js без использования фреймворков.
Robotti
Ну почему я раньше не обнаружил эту подборку!? Ведь буквально пару недель назад нужно было, пришлось с аппла брать и переделывать =(
Яппи
кто нибудь реализовывал 2-3-4 слайдера на одной странице?
#
Яппи
gps
Прикольно а есть слайдера не на QE
#
gps  
boris
не знаете как задать начальную позицию для PhatFusion? чтобы при загрузке страницы ползунок уже находился например на 30
#
boris
Юный электрик
А можно ли два кода-слайдера на одной странице использовать, не в курсе? а то хочу организовать через него и новости и галерею.
Andrew Steadfast
Спасибо! Очень хорошая подборка.
Как раз искал слайдер, по реализации похожий на Coda.
баян
Это уже по моему старые слайдеры...
Евгений
Статья была написана на день победы 2008 года. Конечно старые :)
exept
А где новых взять??? Дайте ссылку кто нибудь
#
exept
gps
Спасибо отличная статья ))))
#
gps
spi4ka
Что то у вас слетели ссылки на демо, а так материал крайне полезен, спасибо!
slot
Отличная подборка, один себе вырвал.

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler