полоса прокрутки jquery - PullRequest
Новая
       30

полоса прокрутки jquery

1 голос
/ 22 июля 2011

Я искал решение своей проблемы уже несколько дней и мне было интересно, может ли кто-нибудь из сообщества stackoverflow помочь мне.

Моя проблема в том, что мне нужна карусель jquery и полоса прокрутки jquery, чтобы работать рука об руку. Карусель обновляет полосу прокрутки и наоборот, но также информация о том, что отображается, находится внутри самой полосы прокрутки (например, (1/12), так что это будет 1 из 12 слайдов / отображается изображение). Также будет добавлен бонус, если я смогу заставить полосу прокрутки привязывать и обновлять отображаемую информацию всякий раз, когда она находится в процессе перетаскивания или извлечения.

Я не знаю, с чего начать, потому что я не знаю, поддерживает ли jCarousel использование jScrollpane с тем же элементом. Если кто-то может любезно разбить процесс того, что действительно должно произойти, это было бы здорово.

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

<< -------- | 5/12 | ------- >>

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

ОБНОВЛЕНИЕ: я запустил jsfiddle, чтобы люди могли взглянуть на то, что я пытаюсь объяснить. Я использую комбинацию из двух плагинов ввода диапазона и прокрутки, сделанные одним и тем же человеком / командой, документы можно найти Здесь и ссылка на мой jsfiddle

ДРУГОЕ ОБНОВЛЕНИЕ: чтобы приблизиться к тому, как я хочу, чтобы он работал, нужна помощь в сглаживании сценария

1 Ответ

0 голосов
/ 22 июля 2011

Использование .animate () и .scrollLeft ():

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

jQuery 

$("#next").click(function(){
    $("#cara").scrollLeft($("#cara").scrollLeft() + 100);
});
$("#prev").click(function(){
   $("#cara").scrollLeft($("#cara").scrollLeft() - 100);
});
...