CODEWITHSUNDEEP
jquery
Tiffany
Tiffany

Reputation: 13

Next and Previous Buttons with JQuery

I'm currently working on a website that when you click on a project image, a full screen overlay pops up with information about the project and additional images. I also would like next and previous buttons to cycle through the projects. I've made the next button work, but it only goes to the next project once. If I click it again, nothing happens.

The website I'm working on is here and I have made a JSBin to show a sample of how my HTML is structured as well as my JQuery.

Could anyone please take a look and help me figure out where I'm going wrong?

Upvotes: 1

Views: 344

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28553

The simplest way is to separate your recent projects from your additional projects and put next and prev functions in for both of them.

This is how you would display your additional projects on previous and next button click. I notice your text disappears on hover. Might wanna adjust that!

 $('.prev-button').click(function() {
    $('.additional-project').hide();
    var previous = $(this).closest('.additional-project').prevAll('.additional-project').eq(0);
    if (previous.length === 0) previous = $(this).closest('.additional-project').nextAll('.additional-project').last();
    previous.show();
});

$('.next-button').click(function() {
    $('.additional-project').hide();
    var next = $(this).closest('.additional-project').nextAll('.additional-project').eq(0);
    if (next.length === 0) next = $(this).closest('.additional-project').prevAll('.additional-project').last();
    next.show();
});

Upvotes: 2

Related Questions