javascript - How to slide images in div up and down with jquery?

Question

html code

<div class="up_arrow"></div>
<div class="content">
    <img src="image_one">
    <img src="image_two">
    <img src="image_three">
</div>
<div class="down_arrow"></div>

Here "image_two" and "image_three" are hidden. What I want is, when I click on "down_arrow" div, "image_one" changes to "image_two" and again when I click on "down_arrow" div, "image_two" changes to "image_three".

Similarly for "up_arrow", image changes from "image_three" to "image_two" just like an image slider. Does anyone know how to do it?

Answer 1

You could animate the scrollTop property of the .content element

var gallery = $('.content'),
    height = gallery.height();

$('.arrow').on('click', function(){
    var up = $(this).is('.up_arrow');

    if (up) {
        gallery.animate({'scrollTop': '-=' + height});
    } else {
        gallery.animate({'scrollTop': '+=' + height});        
    }
});

Demo at http://jsfiddle.net/gaby/a2xmr1mn/

---

note: i have added a common (arrow) class to the arrows for styling/targeting