How To Slide Images In Div Up And Down With Jquery?

html code

<

Solution 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

Solution 2:

You could try something like this:

$('div.up_arrow').on('click', function() {
    var$actImg = $(this).siblings('div.content').find('img:visible');
    if(!$actImg.is(':first-child')) {
        $actImg.hide();
        $actImg.prev().show();
    }
});

See this fiddle.

Solution 3:

For variety, just another approach:

$(".down_arrow").on("click", function ()
{
  var actImage = $("img:visible").index();
  var nextImage = (actImage + 1) < $("img").length ? actImage + 1 : 0;
  $("img:eq(" + actImage + ")").hide();
  $("img:eq(" + nextImage + ")").show();
});
$(".up_arrow").on("click", function ()
{
  var actImage = $("img:visible").index();
  var nextImage = actImage > 0 ? actImage - 1 : $("img").length - 1;
  $("img:eq(" + actImage + ")").hide();
  $("img:eq(" + nextImage + ")").show();
});

Not requested, but when the first image is displayed, click on up_arrow displays the last image; when the last image is displayed, click on down_arrow displays the first image.

Fiddle

Share