Content Slider, need help with jQuery!

1

Background:
So i’m trying to achieve a content slider. Essentially I have my div with “pages” in it and i’m able to press the next button to go to the next page. If I want to go back I press the previous button right. Simple right? I’ve been trying to use jQuery to get this slide working. It kind of works, but only does one page, so I go from Page One to Page Two, then it won’t work anymore :rage:

What I need help with:

I’d love to find someone who could explain to me theoretically how I would get my content slider to work. Also I need someone to explain why my slide won’t work and why it’s such a bad slider. If someone could correct my code to so I can use that as a backup I’d love that! :smiley:

Link to my codepen/code:
Non-working slider

2

Playing with it, it seems that the array you were calling :first and :last on is storing the objects in the order that they’re created in the document. This works (I added a fourth div for my tests):

[code]$(document).ready(function() {
$("#pageTwo, #pageThree, #pageFour").hide();
var arrPages = ["#pageOne", “#pageTwo”, “#pageThree”, “#pageFour”];

$("#prevButton").click(function() {
var vPage = “#” + $(".tributePage:visible").attr(“id”);
var nPage = arrPages.indexOf(vPage) - 1;
if (nPage < 0) nPage += arrPages.length;
$(".tributePage:visible").fadeOut(“fast”);
$(arrPages[nPage]).delay(“100”).fadeIn(“fast”);
});

$("#nextButton").click(function() {
var vPage = “#” + $(".tributePage:visible").attr(“id”);
var nPage = arrPages.indexOf(vPage) + 1;
if (nPage >= arrPages.length) nPage -= arrPages.length;
$(".tributePage:visible").fadeOut(“fast”);
$(arrPages[nPage]).delay(“100”).fadeIn(“fast”);
});
});
[/code]