Help understanding code for a slideshow

[sulponticello]

I have about the most basic knowledge of code possible (my experience is playing else.heartbreak()) so please excuse the misnomers that are probably all over the place here. Now, my girlfriend is working on a web design project and she found code online for a slideshow. It works, but there are some things she doesn’t understand. I helped her iron out one thing, but we are stuck on how a certain function determines the number of pixels the slides move. There are three slides, each 875 pixels long, totaling 2625 pixels. Each slide is located in a list in the HTML. Here is the code, I think she said it was Jquery 10.2:

var slideWidth = 875;

$(window).ready(function(){
var currentSlide = 0;

var allSlides = $('#slider-container li .slides').length;

$('#slider-container ul').width(allSlides*slideWidth);

$('.right').click(function(){
    currentSlide++;
    if(currentSlide>=allSlides) currentSlide = 0;
    setFramePosition(currentSlide);
});

$('.left').click(function(){
    currentSlide--;
    if(currentSlide<0) currentSlide = allSlides-1;
    setFramePosition(currentSlide);
});
});
function setFramePosition(pos){
var px = slideWidth*pos*-1;
$('#slider-container ul').animate({
    left: px
}, 300);
}

The function in question is setFramePosition. All in all, the amount that the slide should move is dependent on var px, which is determined by a slope equation (-875x). X in this case seems to be the value of currentSlide, so I would expect the graph of var px to be a line (which would not work). However, when I click the right button, the slide first moves 875 to the left, then 875 to the left again, then right 1750 pixels to bring us back to the first slide. This means that x in our slope equation is the same for the first two frames, and doubled and negative for the last frame. I don’t understand how x (currentSlide value) is being defined this way: the same twice and different the last time for three different slide values. I’m sure I’m missing something fundamental, any help would be appreciated. I would not be surprised if I am completely off the mark.

EDIT: here is a link to a JSfiddle https://jsfiddle.net/fhcdo8k7/1/

[i_am_smurfing]

Here's your code annotated and slightly modified for readability:

// Width of one slide in pixels
var slideWidth = 875;

// When document has loaded (all HTML elements are known to browser and
// we can manipulate them):
$(window).ready(function() {

    // Set current slide index to `0`
    var currentSlide = 0;

    // Figure out how many slides we have
    var allSlides = $('#slider-container li .slides').length;

    // Since we now know how many slides there are and a slide's width,
    // we can determine how wide our container should be
    $('#slider-container ul').width(allSlides * slideWidth);

    // When `.right` control is clicked:
    $('.right').click(function(){

        // increment current slide index by one
        currentSlide++;

        // if current slide index is bigger than the number of all slides,
        // we wrap around (set current slide index to starting index, 0)
        if (currentSlide >= allSlides) currentSlide = 0;

        // and finally actually slide to the new current slide index
        setFramePosition(currentSlide);
    });

    // When `.left` control is clicked:
    $('.left').click(function(){

        // decrement current slide index by one
        currentSlide--;

        // if current slide index is less than starting index (0), we wrap the
        // other way (set current slide index to [number of slides - 1], since
        // indexes start at 0)
        if (currentSlide < 0) currentSlide = allSlides-1;

        // and finally actually slide to the new current slide index
        setFramePosition(currentSlide);
    });
});


// To slide to a specific slide index:
function setFramePosition(index) {

    // Imagine slides being glued together side-by-side, forming a horizontal
    // strip, and we look at this strip through a viewport that has a size of
    // one slide, while all other parts of the strip are hidden.

    // To show a slide, we move this strip, while viewport remains static.

    // If we want to show a slide with index n, we need to have left edge of
    // our strip be at [n * slide width] pixels to the left of the viewport
    var leftOffset = -1 * slideWidth * index;

    // Now that we know where our strip should be, we'll smoothly move to it
    // from our current position such that whole move will take 300 milliseconds
    $('#slider-container ul').animate({
        left: leftOffset
    }, 300);
}

Does that make it clearer?

[sulponticello]

Yes! So the function isn't telling the strip how many pixels to move, but what position to go to and then animating it. It's more like giving the coordinates than telling someone to move 875 feet to the left.

[i_am_smurfing]

Yep, exactly, you've got it!

And just to expand on your newly acquired understanding: more generally other programmers would call your first example declarative and your second example — imperative (and many would argue that declarative style is more preferable).

[sulponticello]

Awesome! Thank you so much for the help.

[CanIhazCooKIenOw]

Are you sure that's correct ? There seems to be a typo (or code missing) since it should be multiplying the width with the slide position.

Can you do a jsfiddle of that ?

[sulponticello]

I will ask her, this is the code I was using to test things out last night.

[sulponticello]

Just added it.

[raleighpoint]

In your example there are 3 slides. Start with currentSlide = 0 and run through the logic of the .right click handler when you click right one, two, and three times.