Представьте, что слайд-шоу выглядит примерно так: http://malsup.com/jquery/cycle/div.html, за исключением того, что у него есть только два изображения вместо трех.
Также представьте, что у него есть два триггера, например, демонстрация в середине этой страницы: http://jquery.malsup.com/cycle/lite/
Это то, что я хочу построить.
Однако, когда вы нажимаете 'next' и 'prev', я бы хотел, чтобы каждое изображение переместилось на другое, и наоборот. Таким образом, код будет выглядеть примерно так:
<div id="slideshow" width="100%">
<div class="slide">
<img src="image1.jpg" width="43%">
<img src="image2.jpg" width="43%">
</div>
<div class="slide">
<img src="image3.jpg" width="43%">
<img src="image4.jpg" width="43%">
</div>
</div>
JQuery выглядит так:
$('#slideshow').cycle({
fx: 'wipe',
timeout: 0,
prev: '#left-arrow',
next: '#right-arrow',
});
Таблица стилей:
#slideshow {
overflow: hidden;
}
Итак, представьте, когда вы нажимаете «Далее» (или «# стрелка вправо» в этом случае) - и вы находитесь в исходном состоянии слайд-шоу, что должно произойти, когда изображение 2 должно переместиться в положение изображения 1, а изображение 3 Теперь становится видимым, где image2.
Нажмите «Далее» еще раз, он продолжает вращаться, и теперь изображения 1 и 2 больше не видны.
Нажмите предыдущий, и он последовательно возвращается.
Как мне изменить этот плагин для этой функциональности?
Я пробовал несколько разных вещей, в том числе каждое изображение на отдельном слайде, но моя реализация так и не сработала.
Есть идеи?