Предложения по карусели или связанные с ними <div>клик и анимация взаимодействия

Question

Проведя вчерашний день, просматривая SO и онлайн, и не совсем найдя то, что, по моему мнению, мне нужно, я захотел попросить у сообщества предложения.У меня есть конкретное взаимодействие, которое я пытаюсь прототипировать, и я предполагаю, что есть плагин, который я могу использовать вместо того, чтобы начинать с нуля, но не могу его найти.

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

Касание не требуется для этого демо / прототипа.

По запросу, вот эскиз:

Answer 1

Думал, что я попробую прототип.Размеры крошечные, потому что они в jsfiddle, но вы можете развернуть окно результатов и изменить размеры, если хотите.Я только протестировал это в Chrome, и он использует много CSS3:

http://jsfiddle.net/TdAhm/4/

И вот скриншот.Почему бы и нет?Я думаю, что это хорошо сочетается с эскизом.Меня немного смущает вопрос о том, действительно ли вы хотели, чтобы предыдущий div получился сжатым, а не перекрытым.Это кажется нецелесообразным, поскольку содержимое в div будет искажено, но это выполнимо.

Answer 2

Трудно дать ответ, но, насколько я понял, вы можете взглянуть на

jQuery Tools Scrollable

, взаимодействующий с

Nivo Slider

Я разрабатываю что-то (возможно) похожее.Взгляните на этот сайт (я все еще развиваюсь).

Надеюсь, это поможет вам.

Answer 3

Это похоже на довольно сложный код

Посмотрите на цепочку функции .animate, чтобы это произошло

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

использовать .animate, функции обратного вызова и, возможно, .queue

Я не могу предоставить примеры, которые лучше найти, чем первый результат в Google, поскольку он настолько сложен

Если это не поможет, вам должен понравиться Мэтт Сайд, набросайте его и попытайтесь прояснить