Создание слайдеров с анимированной прокруткой, используя Javascript

[Akenfold]

К сожалению у меня не хватило кармы, чтобы перенести этот топик в блог Javascript.

[ukko]

Теперь переносите :)

[Akenfold]

Спасибо, перенёс :)

[demonstr]

Может примените хабракат?

[Akenfold]

Прошу прощения, в первый раз публикую топик. Уже исправил.

[demonstr]

Спасибо.

[FuN_ViT]

div#sample-slider {position:relative; z-index:20}
div#sample-slider ol#slides{z-index:10}

помогло?

[Akenfold]

Этот способ я пробывал. Только устанавливал меньше значения.
Нет, к сожалению не помогло.

[FuN_ViT]

хм. а у меня в IE7 — помогло.

[Akenfold]

Хм, я тестировал в Internet-Explorer 8 в режиме IE7…
Перепроверю непосредственно на IE7. Большое спасибо за помощь.

[Parkim]

z-index-ы не нужны, достаточно position: relative :)

[Akenfold]

Спасибо за совет!

[Akenfold]

Извини, был не внимательным: не установил position в relative. Всё отлично работает.

[Shtorkin]

Поскольку многие используют JS-фреймворки, разумно использовать готовое решение, которое лишено указанных Вами ограничений по браузерам: http://flowplayer.org/tools. Есть версия «со встроенным» jQuery, есть в виде отдельного файла.

[Akenfold]

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

[almalexa]

Есть ещё отличный плагин scrollTo с надстройкой ввиде плагина SerialScroll

[Mithgol]

А если на scrollTo навесить ещё плагин LocalScroll, то можно получить плавную прокрутку по внутренним гиперссылкам страницы.

$.localScroll({ hash: true }); — и понеслось.

(Упоминаю на всякий случай, вдруг кто не знает этого, и тогда совет мой неминуемо станет превеликим тому подспорьем.)

[kegf]

и сегодняшний релиз slideitmoo на mootools

[Akenfold]

Зато мой пример небольшой, простой в использовании и не требует установки ядра MooTools :)

[3ds]

я дааавно баловался, похожее сделал на JQuery, но чуть по другому sandbox.pochta.ru/

[Akenfold]

Интересный пример. Мне понравилась идея с видимыми краями соседних слайдов.
Кстати, и девушка на фото — очень красивая :)

[3ds]

Спасибо, это моя GF. ;)

[Parkim]

div#sample-slider {
border: 1px solid #000000;
height: 60px;
overflow: hidden;
width: 302px;
position: relative; /* добавить */
}


[Akenfold]

Спасибо за полезный совет!

[GeorP]

У вас в рабочем примере, где две ссылочки slide left и slide right, когда жмем slide right то наша лента уходит вправо, а на самом деле она должна уходить влево — мы как бы хотим посмотреть контент, который правее.

[Akenfold]

Да, вы правы. Переделал. Спасибо за отзыв!

[1ac3124]

Нет ссылки на отдельный слайд

[Akenfold]

Я не понял, что вы имеете в виду. Сделать методы, возвращающие ссылки на отдельные слайды?

[Quiz]

Текст ссылки начинает выделяться при дабл клик, что не есть хорошо.

[daping]

Из тех браузеров, где проводилось тестирование — Mozilla Firefox 3.5.2, Google Chrome 2.0.172.39, Opera 9.6 и Microsoft Internet Explorer 8.0.7600.16385), — эта проблема наблюдалась только в Opera.

Возможно, ещё имеет значение платформа. Все вышеописанные браузеры у меня установлены в Windows 7 RTM.

[Quiz]

Что бы избежать этого на всех платформах можно воспользоваться 'button'

[Akenfold]

Спасибо за совет. Переделал на кнопках.

[reallyalexpro]

А колёсико?

[Akenfold]

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

[reallyalexpro]

Вот, из состава вышеуказанного jQuery TOOLS, присутствует горизонтальный вариант с прокруткой колесиком. Очень удобно.

[Akenfold]

Да, действительно, довольно удобно. Ну что ж, буду иметь в виду.

Обычно я делаю то, что нужно заказчику. И очень часто, это 1-2 «тулзы» с чётко определёнными требованиями к функциональности, которые довольно просто и быстро можно написать вручную.

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

[AlphaX]

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

[Akenfold]

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

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

Но всё равно, спасибо за идею.

[3ds]

habrahabr.ru/blogs/javascript/66875/#comment_1886297

[FastSP]

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

[Akenfold]

Впринципе, до конца рабочей недели я буду свободен. Так что, если понадобится докуртить дополнительную функциональность, могу сделать реализацию для вас :)

[FastSP]

Было бы здорово. Возможно ли реализовать прокрутку слайдов не под одному, а чтобы при нажатии на кнопки навигации прокручивались сразу 3 слайда, получается что то вроде блочного показа.

[Akenfold]

Да, так можно сделать. Я отправил вам письмо по Хабропочте.

[Nikita]

Если очень быстро нажать «Slide Left», «Slide Right» получится интересный эффект. (FF 3.5).

[Akenfold]

Данный эффект наблюдался мной только в Firefox 3.5.2 (в других версиях не тестировал). Я не стал усложнять реализацию, чтобы упростить код для примера. Но сейчас, думаю, смогу очень просто решить эту проблему. Чуть позже доработаю, протестирую и напишу результат.

Спасибо за фидбэк :)

[Akenfold]

Сегодня было проведено успешное тестирование в браузере Microsoft Internet Explorer 6.0.2900.5512 в Windows XP Professional SP3, а также в Opera 8.65.2779 (только в режиме display установленном в desktop) в Windows Mobile 6.1 Professional.

[benedikt]

А можно сделать так, чтобы автоматически как в demo.gavick.com/ в шаблоне ICKI Sports под большими картинками?

[Akenfold]

Да, конечно, можно. В этой статье я привёл прототип слайдера с минимальной базовой функциональностью. На практике же всё будет «заточено» под конкретные требования: обеспечена необходимая функциональность, оптимизирован код.